Cesium项目之公交路线可视化

本文主要对我犯下的一些错误进行纠错，在加载相关数据之前我没有考虑到坐标问题，高德地图采用的是火星坐标，和我们使用的白膜数据坐标产生了一些偏差（WGS84），现在我们对底图进行切换，把高德地图切换为天地图，因为天地图为（WGS84坐标）在我们替换之后，建筑白膜数据就能完美对应

const layer = new Cesium.WebMapTileServiceImageryProvider({
    // url:'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
  // url: 'http://wprd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
  url: `http://t{s}.tianditu.gov.cn/vec_w/wmts?tk=${tdtKey}`,
  layer: 'vec',          // 图层名
  style: 'default',      // 样式
  format: 'tiles',       // 格式
  tileMatrixSetID: 'w',  // 矩阵集ID (w表示WGS84)
  subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
})
  // 添加天地图注记层（中文标签）
  const tdtAnnoLayer = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t{s}.tianditu.gov.cn/cva_w/wmts?tk=${tdtKey}`,
  layer: 'cva',
  style: 'default',
  format: 'tiles',
  tileMatrixSetID: 'w',
  subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
})
  viewer.imageryLayers.addImageryProvider(tdtAnnoLayer)

接下来我们发现我们的线路，模型等与地图位置不符合，这和上诉的原因一致，接下来我们使用坐标转换对其调整。安装坐标转换库

npm install gcoord  # 或 yarn add gcoord

 在代码中导入

import gcoord from 'gcoord'

然后在代码中编写路线

  xArr.forEach((item, index) => {
    const [lng,lat] = gcoord.transform(
      [parseFloat(item),parseFloat(yArr[index])],
      gcoord.GCJ02,
      gcoord.WGS84
    )
    positions.push(Cesium.Cartesian3.fromDegrees(lng, lat))
  })

站牌

  load.stations.forEach((item) => {
    // console.log(item.xy_coords)
    const xyArr = item.xy_coords.split(';')
    // console.log(xyArr)
    const [lng,lat] = gcoord.transform(
      [parseFloat(xyArr[0]),parseFloat(xyArr[1])],
      gcoord.GCJ02,
      gcoord.WGS84
    )
    pointArr.push(Cesium.Cartesian3.fromDegrees(lng, lat))
  })

可以看到我们的线路完美的在地图上展示了。