场景

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、效果

Openlayers中将某个feature置于最上层相关推荐

iOS开发-将UIView置于最上层
[parentView bringSubviewToFront:subview]; // 将 subview 置于 parentView 的顶层其中 parentView 表示该 UIView 的父 ...
Openlayers 图形要素 Feature 移动和编辑
Openlayers 图形要素 Feature 移动和编辑 OpenLayers 教程 Openlayers 图形要素 Feature 移动和编辑在线示例 OpenLayers 教程 Openlay ...
Openlayers 图形要素 Feature 闪烁
Openlayers 图形要素 Feature 闪烁 OpenLayers 教程 Openlayers 图形要素 Feature 闪烁在线示例 OpenLayers 教程工作中有时候会遇到图形要素 ...
LabVIEW中将前面板置于所有桌面窗口的前面
LabVIEW中将前面板置于所有桌面窗口的前面想将前面板窗口设置在所有桌面窗口的前面.前面板属性IsFrontmost(如下图所示)将前面板设置为仅位于所有 LabVIEW 窗口的前面.如何将前面板 ...
div显示在上层_html如何将一个div置于最上层
展开全部设置style 中 z-index:auto auto可定义为e5a48de588b63231313335323631343130323136353331333337623433一个值(整数 ...
openlayers 可以实现3d地图效果吗_OpenLayers教程：地图标注
地图标注是将空间位置点与该点的信息相关联,通过图标.文字等形式把点相关的信息展现到地图上. 随便打开一个电子地图就可以看到许多标注: 可以说地图没有了标注就丧失了一半信息,甚至是全部信息! 地图标注的 ...
ArcGis 10+Oracle发布WFS-T服务，无法更新Feature的解决方法
现象: 前端采用Openlayers,更新Feature时服务器端返回的XML提示更新错误原因: 参考:http://support.esri.com/en/knowledgebase/techar ...
OpenLayers之多源数据加载七：矢量地图
一.矢量地图介绍矢量地图的图形的元素是一些点.线.矩形.多边形.圆和弧线等等,它们都是通过数学公式计算获得的.由于矢量图形可通过公式计算获得,所以矢量图形文件体积一般较小. 矢量图形最大的优点是无论 ...
WPF 让窗口激活作为前台最上层窗口的方法
在 WPF 中,如果想要使用代码控制,让某个窗口作为当前用户的输入的逻辑焦点的窗口,也就是在当前用户活动的窗口的最上层窗口,默认使用 Activate 方法,通过这个方法在大部分设备都可以做到激活窗口 ...

Openlayers中将某个feature置于最上层

场景

实现

Openlayers中将某个feature置于最上层相关推荐

最新文章

热门文章