问题背景
在引用地图服务时,如果地图的数据很大或点线面等对象数据过多,地图加载的等级又很大时,一次性全量地图加载的速度就会很慢,为此想的解决办法就是实现局部加载。
实现局部加载的步骤
- 使用geoserver发布geojson 数据。(步骤省略)
- 获取对角点的坐标(例如东北、西南点)
- 根据对角点的坐标获取改范围的数据。
openLayers 方法
// 获取地图对角投影坐标
var coordinate = map.getView().calculateExtent(map.getSize());
get_mapData(coordinate );
//获取数据的方法
function get_mapData(data) {
// geoServer的服务地址
var server_url ='http://XXX.XX.XXX:6081/geoserver/wf3?service=WES&version=1.0.0zrequest=GetFeaturestypeName=bug号3AV2_LINKEoutputFormat=application/json&BBOX=';
// 拼凑范围坐标点
var boox = data[0]+","+data[1]+",""+data[2]+","+data[3] ;
// 最终的请求地址
var url= server_url + boox ;
$.ajax({
url:url,
success: function(data) {
// 省略ajax请求成功后的操作
......
}
});
}
高德地图API方法
// 显示当前地图边界范围坐标
function logMapBouns() {
var bounds = map.getBounds();
var northeast = (bounds.northeast).split(","); //东北角
var southwest = (bounds.southwest).split(","); //西南角
}
logMapBounds();
//绑定地图移动和缩放事件
map.on('moveend',logMapBounds);
map.on('zoomend',logMapBounds);
}