three下钻之后地图比例展示不正常问题如何修改?

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 }
    }

虽然现在有了这个函数,但是我的界面还是不正常的。看截图
中国地图

下钻到青海截图

下钻到郑州地图

我想让下钻之后的地图与中国地图大小相似,应当如何调整我墨卡托投影转换 的比例那个函数

阅读 917
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏