cesium中geocoder默认使用的是bingmap的geocoder服务。只需设置geocoder:true即可调用。
viewer = new Cesium.Viewer("cesiumContainer", {
geocoder: true,
})
但是,bingmap是国外服务,很多搜索不太合适。
经查看官方文档,发现官方内置了几种geocoder服务。
- BingMapsGeocoderService
- PeliasGeocoderService
-
OpenCageGeocoderService
但试了下,这几种的中文提示都不怎么好。所以还是想自定义,如使用高德的geocoder。
以下是使用高德和openstreet的geocoder代码,相比高德,openstreet的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(),
})
网友评论