搜索地区，将其显示在地图的可视范围内(高德api)

项目中有一个功能：在地图中搜索城市，并将城市显示在地图的可视范围内，用高德api实现。实现样式如下图所示。

 实现的大致思想如下：

• 调用高德api接口，详细用法及注意事项见官网介绍：行政区域查询-API文档-开发指南-Web服务 API | 高德地图API。
• 接口调用成功后，返回的数据如下图所示（以搜索深圳为例）。

• 返回的数据包含cener(地区中心)和polyline(地区边界点)，我选择使用polyline数据，不选择cener的原因是：使用center只能确定地图的中心点，显示的范围由地图的缩放程度决定，若搜索的地区较小或较大，都无法准确的找到搜索地区。使用polyline则可以确定搜索地区的范围，将地图缩放到范围内。
• 对polyline字符串数据进行处理，将字符串转化为数组。注意：如果搜索地区有飞地，字符串中会出现“|”字符，需要对其进行处理。
• 新建VectorLayer（设置layer的填充颜色和边界颜色都为透明），添加VectorSource。

•  根据polyline转化的数组在source上绘制feature，使用openlayer自带的方法获取四至信息并将地区显示在地图可见范围内。代码如下：

searchCityRange() {
    let that = this;
    if (this.cityName === '') {
        return;
    }
    let url = 'https://restapi.amap.com/v3/config/district'
    let key = '从官网申请的key'
    axios.get(url + '?keywords=' + this.cityName + '&subdistrict=0&key=' + key + '&extensions=all')
        .then(res => {
            let resultObj = res.data
            if (resultObj.status !== '1') {
                that.$message.error('系统错误，请联系管理员')
                return;
            }
            if (resultObj.districts.length < 1) {
                that.$message.info('只支持单个关键词语搜索且搜索范围最小到县/区')
                return;
            }
            if (resultObj.districts[0].level === 'street') {
                that.$message.info('不能搜索乡镇/街道级别区域')
                return;
            }
            this.searchSource.clear();
            //处理polyline,转化为数组
            let polygons = []
            let areaStr = resultObj.districts[0].polyline
            let areaArr = areaStr.split('|');
            for (let j = 0; j < areaArr.length; j++) {
                let polygonCors = []
                let boundStr = areaArr[j];
                let boundArr = boundStr.split(';')
                for (let i = 0; i < boundArr.length; i++) {
                    let arr = boundArr[i].split(',');
                    let arr1 = fromLonLat([parseFloat(arr[0]), parseFloat(arr[1])])
                    polygonCors.push(arr1);
                }
                polygons.push(polygonCors)
            }
            //绘制图形，定位在地图的可视范围内
            let geo = new Polygon(polygons)
            let feature = new Feature(geo)
            this.searchSource.addFeature(feature);
            let extent = this.searchSource.getExtent();
            this.map.getView().fit(extent, this.map.getSize());
        })
},

 至此，功能就实现了，对openlayer方法有问题的可以查看官方文档：OpenLayers v7.4.0 API - Index，有详细注解。