『Cesium 基础』Geocoder 扩展 查询高德 POI

关注公众号"seeling_GIS"， 领取学习视频资料

Geocoder 是一个非常简单的控件，但也是非常常用且实用的控件，顾名思义，Geocoder 就是地理编码的意思，而平常我们经常会查询一些地物，也就是常用的 POI 搜索，就是 Geocoder 的功劳。

初始化时候启用 geocoder

 "geocoder": true

重写 geocoder 中 _searchCommand

geocoder._searchCommand = Cesium.createCommand(() => {
    if (geocoder.isSearchInProgress) {
        // 查询进行中，取消执行查询
        vm.cancelGeoCode(geocoder);
    } else {
        // 执行查询
        vm.geocode(geocoder);
        console.log('geocoder', geocoder);
    }
});

取消执行查询 cancelGeocode

cancelGeocode(viewModel) {
        viewModel._isSearchInProgress = false;
        if (Cesium.defined(viewModel._geocodeInProgress)) {
            viewModel._geocodeInProgress.cancel = true;
            viewModel._geocodeInProgress = undefined;
        }
        this.remove(viewModel);
    },

执行查询 geocode

geocode(viewModel) {
        let query = viewModel.searchText;
        if (/^\s*$/.test(query)) {
            //whitespace string
            return;
        }
        let splitQuery = query.match(/[^\s,\n]+/g),
            height = 300;
        if (splitQuery.length === 2 || splitQuery.length === 3) {
            let longitude = +splitQuery[0],
                latitude = +splitQuery[1];
            let obj = transform.gcj_decrypt_exact(latitude, longitude);
            height = splitQuery.length === 3 ? +splitQuery[2] : 300.0;

            if (!isNaN(longitude) && !isNaN(latitude) && !isNaN(height)) {
                this.updateCamera(viewModel, Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, height));
                return;
            }
        }
        viewModel._isSearchInProgress = true;
            // key 需要自行申请
        var url =`https://restapi.amap.com/v3/place/text?keywords=${query}&key=${key}&types=&city=&children=1&offset=20&page=1&extensions=all`;

        var promise = axios.get(url);
        let vm = this;
        var geocodeInProgress = (viewModel._geocodeInProgress = Cesium.when(
            promise,
            result => {
                if (geocodeInProgress.cancel) {
                    return;
                }
                viewModel._isSearchInProgress = false;

                if (result.data.pois.length === 0 || result.data.count === 0) {
                    viewModel.searchText = viewModel._searchText + ' 无相关数据';
                    return;
                }
                vm.remove(viewModel); //移除上一结果
                var obj,
                    pois = result.data.pois;
                viewModel.suggestions.removeAll(); //移除搜索建议结果
                for (var i = 0; i < pois.length; i++) {
                    var resource = pois[i];

                    var location = resource.location.split(',');
                        // 高德火星坐标经纬度转 wgs84坐标
                    obj = transform.gcj_decrypt_exact(location[1] * 1, location[0] * 1);

                    let position = Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat);
                    var entity = {
                        id: resource.name + i,
                        position,
                        point: {
                            show: true, // default
                            color: Cesium.Color.SKYBLUE, // default: WHITE
                            pixelSize: 10, // default: 1
                            outlineColor: Cesium.Color.YELLOW, // default: BLACK
                            outlineWidth: 3 // default: 0
                        }
                    };
                    //新增搜索建议结果
                    viewModel.suggestions.push({
                        displayName: resource.name,
                        destination: position
                    });

                    entity.description = new Cesium.ConstantProperty(resource.name);

                    viewModel.entities.push(entity);
                    this.viewer.entities.add(entity);

                    if (i === 0) {
                        viewModel._searchText = resource.name;
                        this.updateCamera(viewModel, Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, height));
                    }
                }
            },
            () => {
                if (geocodeInProgress.cancel) {
                    return;
                }
                viewModel._isSearchInProgress = false;
                viewModel.searchText = viewModel._searchText + ' (错误)';
            }
        ));
    },

更多内容，欢迎关注公众号