Openlayers中使用Cluster+Overlay实现点击单个要素和聚合要素时显示不同弹窗
生活随笔
收集整理的這篇文章主要介紹了
Openlayers中使用Cluster+Overlay实现点击单个要素和聚合要素时显示不同弹窗
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Openlayers中使用Cluster實現縮放地圖時圖層聚合與取消聚合：
Openlayers中使用Cluster實現縮放地圖時圖層聚合與取消聚合_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面實現聚合效果之后，如果要實現點擊聚合要素與單個要素時彈出不同的彈窗。
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、首先實現點擊要素彈窗的實現
可以參考如下
Vue+Openlayer使用overlay實現彈窗彈出顯示與關閉：
Vue+Openlayer使用overlay實現彈窗彈出顯示與關閉_BADAO_LIUMANG_QIZHI的博客-CSDN博客
2、關鍵就是監(jiān)聽地圖的單擊事件并根據要素的個數分別彈窗顯示不同的內容
??????? map.on('singleclick', function (evt) {if (feature) { //捕捉到要素if (feature.values_.features && feature.values_.features.length == 1) { //只有一個要素console.log("進入單元素聚合");} else { //有多個要素??????????????????????????????????????????????????console.log("有多個要素");}} else {console.log("沒有元素");}});3、添加彈窗的標簽
??? <div id="popup" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer">X</a><div id="popup-content" class="popup-content"></div></div>4、設置窗體的樣式
??? <style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}.ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;}.popup-content {width: 400px;}.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;}</style>5、獲取到彈窗的節(jié)點DOM
??????? // 獲取到彈框的節(jié)點DOMvar container = document.getElementById("popup");var content = document.getElementById("popup-content");var closer = document.getElementById("popup-closer");6、彈窗關閉事件
??????? //彈窗關閉事件closer.onclick = function () {_that.overlay.setPosition(undefined);closer.blur();return false;};7、創(chuàng)建overlay對象并添加到地圖
??????? // 創(chuàng)建一個彈窗 Overlay 對象var overlay = new ol.Overlay({element: container, //綁定 Overlay 對象和 DOM 對象的autoPan: true, // 定義彈出窗口在邊緣點擊時候可能不完整 設置自動平移效果autoPanAnimation: {duration: 250 //自動平移效果的動畫時間 9毫秒}});map.addOverlay(overlay);8、其他都是加載離線瓦片地圖的代碼，完整示例代碼
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>縮放地圖實現聚合與取消聚合-動態(tài)彈窗顯示</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;}.ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;}.popup-content {width: 400px;}.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;}</style> </head><body><div id="map"></div><div id="popup" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer">X</a><div id="popup-content" class="popup-content"></div></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});// 隨機創(chuàng)建要素var clusterSource = new ol.source.Vector();for (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});// 獲取到彈框的節(jié)點DOMvar container = document.getElementById("popup");var content = document.getElementById("popup-content");var closer = document.getElementById("popup-closer");//彈窗關閉事件closer.onclick = function () {_that.overlay.setPosition(undefined);closer.blur();return false;};// 創(chuàng)建一個彈窗 Overlay 對象var overlay = new ol.Overlay({element: container, //綁定 Overlay 對象和 DOM 對象的autoPan: true, // 定義彈出窗口在邊緣點擊時候可能不完整 設置自動平移效果autoPanAnimation: {duration: 250 //自動平移效果的動畫時間 9毫秒}});map.addOverlay(overlay);let _that = this;map.on('singleclick', function (evt) {let coordinate = evt.coordinate// 點擊尺 （這里是尺(米)，并不是經緯度）;var feature = map.forEachFeatureAtPixel(evt.pixel, (feature) => {return feature;});if (feature) { //捕捉到要素if (feature.values_.features && feature.values_.features.length == 1) { //只有一個要素content.innerHTML = `<p>只有一個要素的彈窗：</p><p>坐標：</p>X：${coordinate[0]} Y: ${coordinate[1]}`;_that.overlay.setPosition(coordinate); //把 overlay 顯示到指定的 x,y坐標console.log("進入單元素聚合");} else { //有多個要素??????????????????????????????????????????????????content.innerHTML = `<p>有多個要素的彈窗：</p><p>坐標：</p>X：${coordinate[0]} Y: ${coordinate[1]}`;_that.overlay.setPosition(coordinate); //把 overlay 顯示到指定的 x,y坐標console.log("有多個要素");}} else {console.log("沒有元素");}});//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+Overlay实现点击单个要素和聚合要素时显示不同弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Openlayers中使用Cluster
- 下一篇： Openlayers中使用Overlay