supermap超图选取起点终点添加折线显示路线

思路

1.拿到地图起点终点的笛卡尔坐标
2.将起点和终点的笛卡尔坐标转成经纬度，调用高德接口拿到路线geojson坐标
3.使用geojson绘制线路

高德接口文档

https://lbs.amap.com/api/webservice/guide/api/direction

超图文档

http://support.supermap.com.cn:8090/webgl/docs/Documentation/Polyline.html?classFilter=poly
http://support.supermap.com.cn:8090/webgl/docs/Documentation/Entity.html?classFilter=ent

请求高德地图获取路径信息

async getPathFromGaode() {
  const params = {
    origin: translateToGaode(this.startPoint),
    destination: translateToGaode(this.endPoint),
    output: 'JSON',
    key: '你的key'
  }
  if (this.type === '驾车路线查询') {
    const result = await getWayFromGaodeDriving(params) // 请求高德驾车路线
    this.wayfromGaode = result.data.route
  } else if (this.type === '步行路线查询') {
    const result = await getWayFromGaodeWalking(params) // 请求高德步行路线
    this.wayfromGaode = result.data.route
  }
  this.handlerPositionData() // 处理请求的路线数据
  showNavRouteOnMap(this.polyline) // 添加路线
},

处理请求数据

handlerPositionData() {
   let arr = ''
   let arr1 = ''
   
   // 把拿到的json数据转为数组
   this.wayfromGaode.paths[0].steps.map(item => {
     item.polyline = translate(item.polyline)
     arr += item.polyline.concat(',')
   })
   const newArr = arr.replace(/;/g, ',').substring(0, arr.lastIndexOf(','))
   this.polyline = newArr.split(',').map(Number)
   
   this.distance = this.wayfromGaode.paths[0].distance // 总距离
   this.duration = this.wayfromGaode.paths[0].duration // 总时间
   this.traffic_lights = this.wayfromGaode.paths[0].traffic_lights // 红绿灯个数
   
   this.wayfromGaode.paths[0].steps.map(item => {
     arr1 += item.instruction.concat(',')
   })
   this.information = arr1 // 导航信息
   this.infoFlag = true
 },

路线添加删除

// 路线添加
const navRouteId = 'nav-route-polyline'
function showNavRouteOnMap(position) {
  viewer.entities.removeById(navRouteId)
  viewer.entities.add({
    id: navRouteId,
    name: 'nav route polyline',
    polyline: {
      clampToGround: true, // 贴地
      show: true,
      positions: Cesium.Cartesian3.fromDegreesArray(position),
      width: 20,
      material: new Cesium.PolylineArrowMaterialProperty(
        Cesium.Color.RED
      )
    }
  })
}
// 删除路线
function hideNavRouteOnMap() {
  viewer.entities.removeById(navRouteId)
}

坐标转换

// 转换处理高德的导航路径
export function translate(str) {
  const pointStrArr = str.split(';')
  const pointArr = pointStrArr.map(pointStr => {
    const [lng, lat] = pointStr.split(',').map(Number)
    const arr = fromGaodeToGpsPoint(lng, lat)
    return arr.join(',')
  })
  return pointArr.join(';')
}
// 高德坐标转84坐标
export function fromGaodeToGpsPoint(lng, lat) {
  const resLat = lat * 2 - (lat + ((-100 + 2 * (lng - 105) + 3 * (lat - 35) + 0.2 * (lat - 35) * (lat - 35) + 0.1 * (lng - 105) * (lat - 35) + 0.2 * Math.sqrt(Math.abs(lng - 105)) + (20 * Math.sin(6 * (lng - 105) * Math.PI) + 20 * Math.sin(2 * (lng - 105) * Math.PI)) * 2 / 3 + (20 * Math.sin((lat - 35) * Math.PI) + 40 * Math.sin((lat - 35) / 3 * Math.PI)) * 2 / 3 + (160 * Math.sin((lat - 35) / 12 * Math.PI) + 320 * Math.sin((lat - 35) * Math.PI / 30)) * 2 / 3) * 180) / ((6378245 * (1 - 0.00669342162296594)) / ((1 - 0.00669342162296594 * Math.sin(lat / 180 * Math.PI) * Math.sin(lat / 180 * Math.PI)) * Math.sqrt(1 - 0.00669342162296594 * Math.sin(lat / 180 * Math.PI) * Math.sin(lat / 180 * Math.PI))) * Math.PI))
  const resLng = lng * 2 - (lng + ((300 + (lng - 105) + 2 * (lat - 35) + 0.1 * (lng - 105) * (lng - 105) + 0.1 * (lng - 105) * (lat - 35) + 0.1 * Math.sqrt(Math.abs(lng - 105)) + (20 * Math.sin(6 * (lng - 105) * Math.PI) + 20 * Math.sin(2 * (lng - 105) * Math.PI)) * 2 / 3 + (20 * Math.sin((lng - 105) * Math.PI) + 40 * Math.sin((lng - 105) / 3 * Math.PI)) * 2 / 3 + (150 * Math.sin((lng - 105) / 12 * Math.PI) + 300 * Math.sin((lng - 105) / 30 * Math.PI)) * 2 / 3) * 180) / (6378245 / Math.sqrt(1 - 0.00669342162296594 * Math.sin(lat / 180 * Math.PI) * Math.sin(lat / 180 * Math.PI)) * Math.cos(lat / 180 * Math.PI) * Math.PI))
  return [resLng, resLat]
}
// 转换处理选取的点，以高德坐标返回
export function translateToGaode(str) {
  const [lng, lat] = str.split(',')
  const [rLng, rLat] = wgs84togcj02(lng, lat)
  const pointStr = parseFloat(parseFloat(rLng).toFixed(6)) + ',' + parseFloat(parseFloat(rLat).toFixed(6))
  return pointStr
}