cesium自定义geocoder

2022-10-19  本文已影响0人  xiudaozhe

cesium中geocoder默认使用的是bingmap的geocoder服务。只需设置geocoder:true即可调用。

viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: true,
})

但是,bingmap是国外服务,很多搜索不太合适。
经查看官方文档,发现官方内置了几种geocoder服务。

一、创建一个geocoder.js文件

import * as Cesium from "cesium";

/**
   * 自定义geocoders服务
   * opensteet政治不正确,涉及国家领土边界区划勿用
   * 相关配置查看官方文档
   * https://nominatim.openstreetmap.org/ui/search.html
   */
function OpenStreetMapNominatimGeocoder() { }
OpenStreetMapNominatimGeocoder.prototype.geocode = function (input) {
    const query =`format=jsonv2&accept-language=zh&polygon_geojson=1&countrycodes=cn&q=${input}`
    const requestString = "https://nominatim.openstreetmap.org/search?" + query;
    return Cesium.Resource.fetchJson(requestString) //请求url获取json数据
        .then(function (results) {
            let bboxDegrees;
            return results.map(function (resultObject) {
                bboxDegrees = resultObject.boundingbox;
                return {
                    displayName: resultObject.display_name,
                    destination: Cesium.Rectangle.fromDegrees(
                        bboxDegrees[2],
                        bboxDegrees[0],
                        bboxDegrees[3],
                        bboxDegrees[1]
                    ),
                };
            });
        });
};

/**
 * 自定义geocoders服务,采用国内高德地图数据
 */
function AMapNominatimGeocoder() { }
AMapNominatimGeocoder.prototype.geocode = function (input) {
    const query = `key=****&keywords=${input}`;
    const requestString = "https://restapi.amap.com/v3/place/text?" + query;
    return Cesium.Resource.fetchJson(requestString) //请求url获取json数据
        .then(function (results) {
            return results.pois.map(function (bboxDegrees) {
                let [lng, lat] = bboxDegrees['location'].split(',')
                return {
                    displayName: bboxDegrees['name'],
                    destination: Cesium.Rectangle.fromDegrees(
                        lng,
                        lat,
                        lng,
                        lat,
                    ),
                };
            });
        });
};

export {
    OpenStreetMapNominatimGeocoder,
    AMapNominatimGeocoder
}

二、使用自定义的geocoder

import {AMapNominatimGeocoder} from './gis/geocoder.js'
viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: new AMapNominatimGeocoder(),
})
上一篇下一篇

猜你喜欢

热点阅读