加快(高德/OpenLayers)地圖載入速度的方法(屏內/區域性載入地圖資料)
阿新 • • 發佈:2020-12-15
問題背景
在引用地圖服務時,如果地圖的資料很大或點線面等物件資料過多,地圖載入的等級又很大時,一次性全量地圖載入的速度就會很慢,為此想的解決辦法就是實現區域性載入。
實現區域性載入的步驟
- 使用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); }