three.js 地图缩放问题如何解决,
本人新手小白,写了个地图,要求地图有下钻和上钻功能。
地图已经正常画出来了,也能实现上钻下钻功能,但是下钻和上钻之后比例是不正常的,求大佬指教。
有大佬给我指教的是在魔卡托影像之前,给进行缩放,于是就有了中心点获取与 魔卡托获取缩放倍数函数,代码如下
地图json数据是这个网站上下载的 https://datav.aliyun.com/portal/school/atlas/area_selector
加载地图代码
addMapGeometry(jsondata) {
// 初始化一个地图对象
this.map = new THREE.Object3D()
// 墨卡托投影转换
const { averageCoordinate, scaleMin } = this.getCenterMap(jsondata)
const projection = d3
.geoMercator()
.center(averageCoordinate)
.scale(scaleMin)
.translate([0.2, 0.2]) // 根据地球贴图做轻微调整
jsondata.features.forEach((elem) => {
// 定一个省份3D对象
const province = new THREE.Object3D()
// 每个的 坐标 数组
const coordinates = elem.geometry.coordinates
// 循环坐标数组
coordinates.forEach((multiPolygon) => {
multiPolygon.forEach((polygon) => {
const shape = new THREE.Shape()
const lineMaterial = new THREE.LineBasicMaterial({
color: 0x61fbfd,
linewidth: 0.002,
})
const lineGeometry = new THREE.BufferGeometry()
const pointsArray = new Array()
for (let i = 0; i < polygon.length; i++) {
const [x, y] = projection(polygon[i])
if (i === 0) {
shape.moveTo(x, -y)
}
shape.lineTo(x, -y)
pointsArray.push(new THREE.Vector3(x, -y, this.mapConfig.deep)
}
lineGeometry.setFromPoints(pointsArray)
const extrudeSettings = {
depth: this.mapConfig.deep,
bevelEnabled: false // 对挤出的形状应用是否斜角
}
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
// 贴纸
const material = new THREE.MeshPhongMaterial({
map: textureMap,
combine: THREE.MultiplyOperation,
transparent: true,
opacity: 1,
});
const material1 = new THREE.MeshLambertMaterial({
color: '#00035d',
transparent: true,
opacity: 0.95,
side: THREE.FrontSide,
// wireframe: true
})
const mesh = new THREE.Mesh(geometry, [material, material1])
const line = new THREE.Line(lineGeometry, lineMaterial)
const lineBottom = new THREE.Line(lineGeometry, lineMaterial)
// 将省份的属性 加进来
province.properties = elem.properties
// 将城市信息放到模型中,后续做动画用
if (elem.properties.centroid) {
const [x, y] = projection(elem.properties.centroid) // uv映射坐标
province.properties._centroid = [x, y]
}
lineBottom.position.z -= this.mapConfig.deep
province.add(mesh)
province.add(line)
province.add(lineBottom)
})
})
// 地图缩放
// province.scale.set(0.1, 0.1, 0.1);
this.map.add(province)
})
this.scene.add(this.map)
// 获取数据后,加载模型
this.getResponseData()
},
获取中心点及缩放代码
getCenterMap(jsondata) {
let minLat = Infinity
let maxLat = -Infinity
let minLon = Infinity
let maxLon = -Infinity
// 获取所有坐标点
const allCoordinates = []
jsondata.features.forEach((elem) => {
const coordinates = elem.geometry.coordinates
coordinates.forEach((multiPolygon) => {
multiPolygon.forEach((polygon) => {
allCoordinates.push(...polygon)
for (let i = 0; i < polygon.length; i++) {
const [x, y] = polygon[i]
minLat = Math.min(minLat, x)
maxLat = Math.max(maxLat, x)
minLon = Math.min(minLon, y)
maxLon = Math.max(maxLon, y)
}
})
})
})
this.container = document.getElementById('container')
const scaleX = this.container.clientWidth / (maxLat - minLat)
const scaleY = this.container.clientHeight / (maxLon - minLon)
const scaleMin = Math.min(scaleX, scaleY)
// 计算坐标点的平均值
const averageCoordinate = allCoordinates.reduce(
(acc, coordinate) => {
return [
acc[0] + coordinate[0] / allCoordinates.length,
acc[1] + coordinate[1] / allCoordinates.length
]
},
[0, 0]
)
return { averageCoordinate, scaleMin }
}
虽然现在有了这个函数,但是我的界面还是不正常的。看截图
中国地图
下钻到青海截图
下钻到郑州地图
我想让下钻之后的地图与中国地图大小相似,应当如何调整我墨卡托投影转换 的比例那个函数