『Cesium 基础』扩展 Geocoder 调用高德API查询POI数据（十）

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

 

初始化时候启用 geocoder

 

"geocoder": true

重写 geocoder 中 _searchCommand

let geocoder = viewer.geocoder.viewModel;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 + ' (错误)';            }        ));    }