Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合
生活随笔
收集整理的這篇文章主要介紹了
Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Openlayers中實現地圖上打點并顯示圖標和文字：
Openlayers中實現地圖上打點并顯示圖標和文字_BADAO_LIUMANG_QIZHI的博客-CSDN博客_openlayers 打點
上面實現加載顯示離線地圖并顯示圖標元素的效果后。
實現當多個元素堆積在一起時實現聚合顯示效果。
并且伴隨著地圖的縮放實現自動聚合顯示和取消聚合。
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、隨機創建一些要素
??????? // 隨機創建要素var clusterSource = new ol.source.Vector();debuggerfor (var i = 1; i <= 10; i++) {var coordinates = [-11551949.709486058 + Math.random(), 5533080.7247905275 + Math.random()];var feature = new ol.Feature(new ol.geom.Point(coordinates));clusterSource.addFeature(feature);}for (var i = 1; i <= 20; i++) {var coordinates = [-11553949.709486058 + Math.random(), 5527080.7247905275 + Math.random()];var feature = new ol.Feature(new ol.geom.Point(coordinates));clusterSource.addFeature(feature);}這里的坐標值是從地圖上獲取的一些坐標值，然后通過對x和y隨機增加隨機數，構造一組10和一組20個的要素。
2、新建聚合圖層數據源
??????? // 聚合圖層數據源var clusterSourceForLayer = new ol.source.Cluster({source: clusterSource,distance: 100})這里的distance就是設置的聚合的距離。
3、新建聚合圖層
??????? // 聚合圖層var clusterLayer = new ol.layer.Vector({source: clusterSourceForLayer,style: function (feature, resolution) {var size = feature.get('features').length;if (size == 1) {return new ol.style.Style({image: new ol.style.Icon({scale: 0.8,src: './icon/house.png',anchor: [0.48, 0.52]}),text: new ol.style.Text({font: 'normal 12px 黑體',// // 對其方式textAlign: 'center',// 基準線textBaseline: 'middle',offsetY: -35,offsetX: 0,backgroundFill: new ol.style.Stroke({color: 'rgba(0,0,255,0.7)',}),// 文本填充樣式fill: new ol.style.Fill({color: 'rgba(236,218,20,1)'}),padding: [5, 5, 5, 5],text: `霸道的程序猿`,})});} else {return new ol.style.Style({image: new ol.style.Circle({radius: 30,stroke: new ol.style.Stroke({color: 'white'}),fill: new ol.style.Fill({color: 'blue'})}),text: new ol.style.Text({text: size.toString(),fill: new ol.style.Fill({color: 'white'})})});}}});注意這里的核心的代碼就是
style: function (feature, resolution) {var size = feature.get('features').length;if (size == 1) {}else{}如果size大于1則返回聚合樣式，反之則返回圖片樣式。
4、將聚合圖層添加進地圖
??????? //View 視圖管理器，主要用來管理地圖視圖，分辨率或旋轉，中心、投影、分辨率、縮放級別等。var view = new ol.View({//中心點center: [-11549894, 5533433],//縮放等級zoom: 11,//投影坐標系projection: projection,//邊界extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]});//Map Openlayers的核心組件，包含圖層、交互事件、UI控制元素等。var map = new ol.Map({layers: [layer, clusterLayer],target: 'map',view: view});5、除此之外的代碼就是離線加載瓦片地圖的代碼，完整代碼
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>OpenLayers example</title><link rel="stylesheet" href="lib/ol65/ol.css" type="text/css"><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style> </head><body><div id="map"></div><script type="text/javascript" src="lib/ol65/ol.js"></script><script type="text/javascript">var source = new ol.source.XYZ({tileUrlFunction: function (xyz, obj1, obj2) {if (!xyz)return "";var z = xyz[0];var x = Math.abs(xyz[1]);var y = Math.abs(xyz[2]);var xyz_convert = self.convert_(z, x, y);x = xyz_convert[0];y = xyz_convert[1];z = xyz_convert[2];var shift = z / 2;var half = 2 << shift;var digits = 1;if (half > 10)digits = parseInt(Math.log(half) / Math.log(10)) + 1;var halfx = parseInt(x / half);var halfy = parseInt(y / half);x = parseInt(x);y = parseInt(y) - 1;var url = "./images/EPSG_900913" + "_" + self.padLeft_(2, z) + "/" + self.padLeft_(digits,halfx) + "_" + self.padLeft_(digits, halfy) + "/" + self.padLeft_(2 * digits, x) +"_" + self.padLeft_(2 * digits, y) + "." + 'png';return url;}});//projections投影坐標系轉換相關的操作var projection = new ol.proj.Projection({code: 'EPSG:900913',units: 'm',axisOrientation: 'neu'});//Layers 圖層管理類，用來管理圖層信息。主要包括Tile，Image，Vector，VectorTile等圖層。var layer = new ol.layer.Tile({source: source});// 隨機創建要素var clusterSource = new ol.source.Vector();debuggerfor (var i = 1; i <= 10; i++) {var coordinates = [-11551949.709486058 + Math.random(), 5533080.7247905275 + Math.random()];var feature = new ol.Feature(new ol.geom.Point(coordinates));clusterSource.addFeature(feature);}for (var i = 1; i <= 20; i++) {var coordinates = [-11553949.709486058 + Math.random(), 5527080.7247905275 + Math.random()];var feature = new ol.Feature(new ol.geom.Point(coordinates));clusterSource.addFeature(feature);}// 聚合圖層數據源var clusterSourceForLayer = new ol.source.Cluster({source: clusterSource,distance: 100})// 聚合圖層var clusterLayer = new ol.layer.Vector({source: clusterSourceForLayer,style: function (feature, resolution) {var size = feature.get('features').length;if (size == 1) {return new ol.style.Style({image: new ol.style.Icon({scale: 0.8,src: './icon/house.png',anchor: [0.48, 0.52]}),text: new ol.style.Text({font: 'normal 12px 黑體',// // 對其方式textAlign: 'center',// 基準線textBaseline: 'middle',offsetY: -35,offsetX: 0,backgroundFill: new ol.style.Stroke({color: 'rgba(0,0,255,0.7)',}),// 文本填充樣式fill: new ol.style.Fill({color: 'rgba(236,218,20,1)'}),padding: [5, 5, 5, 5],text: `霸道的程序猿`,})});} else {return new ol.style.Style({image: new ol.style.Circle({radius: 30,stroke: new ol.style.Stroke({color: 'white'}),fill: new ol.style.Fill({color: 'blue'})}),text: new ol.style.Text({text: size.toString(),fill: new ol.style.Fill({color: 'white'})})});}}});//View 視圖管理器，主要用來管理地圖視圖，分辨率或旋轉，中心、投影、分辨率、縮放級別等。var view = new ol.View({//中心點center: [-11549894, 5533433],//縮放等級zoom: 11,//投影坐標系projection: projection,//邊界extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]});//Map Openlayers的核心組件，包含圖層、交互事件、UI控制元素等。var map = new ol.Map({layers: [layer, clusterLayer],target: 'map',view: view});//xy行列轉換function convert_(zoomLevel, x, y) {var extent = Math.pow(2, zoomLevel);if (x < 0 || x > extent - 1) {console.log("The X coordinate is not sane: " + x);return;}if (y < 0 || y > extent - 1) {console.log("The Y coordinate is not sane: " + y);return;}// openlayers 6.0版本var gridLoc = [x, extent - y, zoomLevel];// openlayers 4.5版本// var gridLoc = [x, extent - y + 1, zoomLevel];return gridLoc;}//字符截取function padLeft_(num, val) {return (new Array(num).join('0') + val).slice(-num);}</script> </body></html>總結
以上是生活随笔為你收集整理的Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Node-RED安装图形化节点dashb
- 下一篇： Openlayers中使用Cluster