背景

在项目中需要利用cesium进行行政区路标的标识，并可以进行定位。

高德底图

image.png

   function addImageryLayer(viewer, Cesium) {
        viewer.imageryLayers.removeAll();

        var imgLayer = new Cesium.UrlTemplateImageryProvider({
          url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          minimumLevel: 3,
          maximumLevel: 18,
        });
        viewer.imageryLayers.addImageryProvider(imgLayer);

        var annLayer = new Cesium.UrlTemplateImageryProvider({
          url: 'http://webst03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
          minimumLevel: 3,
          maximumLevel: 18,
        });
        viewer.imageryLayers.addImageryProvider(annLayer);
      }

位置搜索与定位

image.png

搜索

同样还是使用高德的接口，进行关键字的搜索

export function getText(keywords: String) {
  return axios({
    method: 'GET',
    url: `https://restapi.amap.com/v5/place/text?key=${key}&keywords=${keywords}`,
  }) as AxiosPromise<AMapResponse<MapInfo>>;
}

定位

 <el-autocomplete
      v-model="searchKey"
      :fetch-suggestions="querySearch"
      clearable
      class="inline-input absolute left-70 top-34 z-10"
      placeholder="请输入地名"
      @select="handleSelect"
    />

      let suggestions: MapInfo[] = [];
      const querySearch = (key, cb) => {
        getText(key).then((res) => {
          suggestions = res.data.pois
            ? res.data.pois.map((item) => {
                return { ...item, value: item.name };
              })
            : [];
          cb(suggestions);
        });
      };

      const handleSelect = () => {
        const find = suggestions.find((item) => item.value === searchKey.value);
        if (find) {
          const arr = find.location.split(',');
          flyTo(arr[0], arr[1]);
        }
      };

  function flyTo(lng, lat) {
        viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(lng, lat, 800),
          orientation: {
            heading: Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)
            pitch: Cesium.Math.toRadians(-90), // default value (looking down)
            roll: 0.0,
          },
        });
      }