美文网首页
cesium自定义geocoder

cesium自定义geocoder

作者: xiudaozhe | 来源:发表于2022-10-19 10:24 被阅读0次

    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(),
    })
    

    相关文章

      网友评论

          本文标题:cesium自定义geocoder

          本文链接:https://www.haomeiwen.com/subject/isdezrtx.html