微信小程序实现导航功能（已有经纬度）与Cesium设置面Entity高亮显示

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

“金秋十月，我要连续30天更文，做劳模，拿手机摄影神器！点击查看活动详情 “即可成功参与

最近接触了小程序和3维地图功能，通过自己摸索实现了以下两个功能（写的时候真是一把鼻涕一把泪啊），下面直接代码实现

经纬度根据后端返回

html

   <van-button class="btn" plain type="primary" @click="navigateTo"> 导航 </van-button>

js代码实现：

   //点击导航（已有经纬度）
    const navigateTo = () => {
      let url_ticket = ''
      url_ticket = window.location.href.split('#')[0]
      getSignature({ url: encodeURIComponent(url_ticket) }).then((res: any) => {
        wx.config({
          beta: true,
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: '', // 必填，公众号的唯一标识
          timestamp: res.result.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
          signature: res.result.signature,// 必填，签名
          jsApiList: ['openLocation',] // 必填，需要使用的JS接口列表   
        });
        wx.ready(() => {
          //导航去到经纬度的地方
          const newArr = wgs84togcj02([111.363, 35.621])  //将wgs84转gcj02  
          wx.openLocation({
            latitude: newArr[1],// 纬度，浮点数，范围为90 ~ -90
            longitude: newArr[0],// 经度，浮点数，范围为180 ~ -180。
            scale: 18,// 地图缩放级别,整形值,范围从1~28。默认为最大 
            address: '', // 地址：要去的地点详细描述
            name: "",//要找的地方名字
          })
          //wx.getLocation(Object object)(获取当前的地理位置、速度)，wx.openLocation(Object object)(使用微信内置地图查看位置)
          //使用 wx.openLocation需要使用火星坐标才能定位准确，所需getLocation的时候，type可以传gcj02。
          //使用 wx.openLocation传的经纬度，安卓传字符串不会出现问题，ios必须转换成数字类型才可以
          //经纬度是后台服务器返回则需要和后台开发协定使用gcj02火星坐标
        })
        wx.error((err: any) => {
          throw new Error(err)
        })
      })

    }

Cesium设置面Entity高亮显示

参数描述：

• id: Entity实体id
• heightEntity：高亮结果Entity
• defaultLayer和tempLayer均是DataSource集合

代码实现：

  // 注册点击事件，并获取到对应的实体id
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
     handler.setInputAction(function (movement) {
      const pick = viewer.scene.pick(movement.position);
      HighlightPolygonEntity(pick.id.id);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 

// 高亮显示函数
  let heightEntity = null;
  let tempLayer: any = null;
  let defaultLayer: any = null;
  const HighlightPolygonEntity = (id: any) => {
    if (heightEntity) {
      defaultLayer.entities.remove(heightEntity);
    }
    if (!id) {
      return;
    }
    const e = tempLayer.entities.getById(id);
    heightEntity = defaultLayer.entities.add({
      polyline: {
        positions: e.polygon.hierarchy.getValue().positions,
        width: 10,
        material: new Cesium.PolylineGlowMaterialProperty({
          glowPower: 0.5, // 一个数字属性，指定发光强度，占总线宽的百分比。
          color: Cesium.Color.ORANGERED
        }),
        clampToGround: true
      }
    });
    viewer.dataSources.raiseToTop(defaultLayer); // 设置defaultLayer置顶
  };

//加载GeoJson
 Cesium.GeoJsonDataSource.load(`./mapjson/${name}.json`).then(function (dataSource) {
      viewer.dataSources.add(dataSource);
      tempLayer = dataSource; //集合
      defaultLayer = dataSource; //集合
      const entities: any = dataSource.entities.values;
      for (let i = 0; i < entities.length; i++) {
        const entity: any = entities[i];
        // 此处用于去重，加载geoJson自动加载边线数组导致循环数目变大
        if (i > 0 && entities[i].name === entities[i - 1].name) {
          continue;
        }
        // 构造随机颜色
        const color = Cesium.Color.fromRandom({ alpha: 0.6 });
        entity.polygon.material = color;
        entity.polygon.outline = false;
        initBillboard(entity);
      }
    });