|
项目中有一个功能：在地图中搜索城市，并将城市显示在地图的可视范围内，用高德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，有详细注解。
|