當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Openlayers中将某个feature置于最上层

發布時間：2025/3/19 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 Openlayers中将某个feature置于最上层小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

Openlayers中使用Image的rotation實現車輛定位導航帶轉角(判斷車輛圖片旋轉角度)：

Openlayers中使用Image的rotation實現車輛定位導航帶轉角(判斷車輛圖片旋轉角度)_BADAO_LIUMANG_QIZHI的博客-CSDN博客_openlayers導航

在上面實現一個圖層中只有一個feature在移動。

如果有多個feature,即有多輛車時，怎樣保證某一個feature，即某一輛車在最上面。

如果有多個feature，且不設置優先級的話會如下

如果要將本車放在最上面，可以將本車與其他車輛放在兩個圖層layer中，然后設置本車的layer位于最上面。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi?
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、聲明兩個圖層

??????? //定位圖層的Sourcevar positonSource = new ol.source.Vector({features: []});// 定位圖層var positionLayer = new ol.layer.Vector({source: positonSource});//定位圖層的Source-本車var positonSourceBenche = new ol.source.Vector({features: []});// 定位圖層-本車var positionLayerBenche = new ol.layer.Vector({source: positonSourceBenche});

2、本車圖層放在最上面，即數組最右邊

??????? var map = new ol.Map({layers: [layer, positionLayer,positionLayerBenche],target: 'map',view: view});

3、將本車放在本車圖層的source中

this.positonSourceBenche.addFeature(feature)

4、其他模擬車輛放在另一個圖層的source中

??????????? //模擬車輛定位數據???????????????var feature1 = new ol.Feature({geometry: new ol.geom.Point([-11554039.941628069, 5531515.7834814])});//設置樣式feature1.setStyle(style);//添加feturethis.positonSource.addFeature(feature1)

5、完整示例代碼

<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>本車圖標在最上方</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 positionData = [{x: '-11560139.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11560039.941628069',y: '5537515.7834814',carNumber: '霸道的程序猿'},{x: '-11559039.941628069',y: '5536515.7834814',carNumber: '霸道的程序猿'},{x: '-11558039.941628069',y: '5535515.7834814',carNumber: '霸道的程序猿'},{x: '-11557039.941628069',y: '5534515.7834814',carNumber: '霸道的程序猿'},{x: '-11556039.941628069',y: '5533515.7834814',carNumber: '霸道的程序猿'},{x: '-11555039.941628069',y: '5532515.7834814',carNumber: '霸道的程序猿'},{x: '-11554039.941628069',y: '5531515.7834814',carNumber: '霸道的程序猿'},{x: '-11553039.941628069',y: '5530515.7834814',carNumber: '霸道的程序猿'},{x: '-11552039.941628069',y: '5529515.7834814',carNumber: '霸道的程序猿'},{x: '-11551039.941628069',y: '5528515.7834814',carNumber: '霸道的程序猿'},{x: '-11550039.941628069',y: '5527515.7834814',carNumber: '霸道的程序猿'},{x: '-11549039.941628069',y: '5526515.7834814',carNumber: '霸道的程序猿'},{x: '-11548039.941628069',y: '5525515.7834814',carNumber: '霸道的程序猿'},{x: '-11547039.941628069',y: '5524515.7834814',carNumber: '霸道的程序猿'},{x: '-11546039.941628069',y: '5523515.7834814',carNumber: '霸道的程序猿'}];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});//定位圖層的Sourcevar positonSource = new ol.source.Vector({features: []});// 定位圖層var positionLayer = new ol.layer.Vector({source: positonSource});//定位圖層的Source-本車var positonSourceBenche = new ol.source.Vector({features: []});// 定位圖層-本車var positionLayerBenche = new ol.layer.Vector({source: positonSourceBenche});//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, positionLayer,positionLayerBenche],target: 'map',view: view});//單擊獲取地圖坐標map.on('singleclick', (evt) => {console.log(evt.coordinate);});//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);}//定時器循環模擬定位效果var index = 0;setInterval(() => {//坐標數據到頭了就重新開始if (index > this.positionData.length - 2) {index = 0;}//定義角度var rotation = 0;//如果是最后一個點if (index == this.positionData.length - 1) {rotation = setAngle(this.positionData[index], this.positionData[index]);} else {rotation = setAngle(this.positionData[index], this.positionData[index + 1]);}//根據索引獲取數據var item = this.positionData[index];//清除上次的if (this.positonSource) {this.positonSource.clear();}if (this.positonSourceBenche) {this.positonSourceBenche.clear();}var feature = new ol.Feature({geometry: new ol.geom.Point([Number(item.x), Number(item.y)])});var style = new ol.style.Style({image: new ol.style.Icon({scale: 0.8,src: './icon/car.png',anchor: [0.48, 0.52],//設置旋轉角度rotation: -rotation,}),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: `${item.carNumber}`,})});//本車樣式var styleBenche= new ol.style.Style({image: new ol.style.Icon({scale: 0.8,src: './icon/house.png',anchor: [0.48, 0.52],//設置旋轉角度rotation: -rotation,}),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: `本車`,})});//以當前點為中心this.flyToPoint([Number(item.x), Number(item.y)])//本車//設置樣式feature.setStyle(styleBenche);//添加feturethis.positonSourceBenche.addFeature(feature)//模擬車輛定位數據???????????????var feature1 = new ol.Feature({geometry: new ol.geom.Point([-11554039.941628069, 5531515.7834814])});//設置樣式feature1.setStyle(style);//添加feturethis.positonSource.addFeature(feature1)//模擬車輛定位數據???????????????var feature2 = new ol.Feature({geometry: new ol.geom.Point([-11554039.941628069, 5531515.7834814])});//設置樣式feature2.setStyle(style);//添加feturethis.positonSource.addFeature(feature2)//移到下個點index++;}, 1000);//設置以當前點位為中心function flyToPoint(point) {var to = pointvar view = this.map.getView()view.animate({center: to,duration: 45})}// 點位轉角function setAngle(first, second) {var dx = second.x - first.xvar dy = second.y - first.yvar rotation = Math.atan2(dy, dx)return rotation}</script> </body></html>

6、效果

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Openlayers中将某个feature置于最上层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue中使用html2canvas和js
下一篇： SpringBoot+Vue+Itext