openlayer轨迹简单DEMO

最新推荐文章于 2024-05-25 22:20:13 发布

qq_35763837

最新推荐文章于 2024-05-25 22:20:13 发布

阅读量1k

点赞数 1

分类专栏：学习笔记 openlayer

本文链接：https://blog.csdn.net/qq_35763837/article/details/84886534

版权

学习笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

openlayer

1 篇文章 0 订阅

订阅专栏

代码如下

<html>
<head>
<title>openlayer轨迹简单DEMO</title>
<link rel="stylesheet" type="text/css" href="ol.css">
<script type="text/javascript" src="ol.js" charset="utf-8"></script>
<style>
.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;
  min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}
</style>
</head>
<body>
<div id="map" style="width:100%;"></div>
<div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
</body>
</html>
<script type="text/javascript">
var center = ol.proj.transform([117.18, 34.27], 'EPSG:4326', 'EPSG:3857');
var markSvgSize = [30, 30] // 及图标大小 
var pathBackTimer = null; //pathBackTimer定时器
var so = new ol.source.Vector();
var source = new ol.source.XYZ({
	url: 'http://192.168.90.50:8095/roadmap/{z}/{x}/{y}.png'//本例中地图瓦片保存在当前目录下的tile文件夹目录下
});
var tile = new ol.layer.Tile({
	source: source
});
var pl = []
  pl.push([117.201419,34.271905]);
  pl.push([117.201988,34.271900]);
  pl.push([117.202106,34.272702]);
  pl.push([117.202202,34.273536]);
  pl.push([117.203286,34.273372]);
  pl.push([117.203323,34.273004]);
  pl.push([117.203892,34.273026]);
  pl.push([117.203769,34.272765]);
  pl.push([117.203554,34.272361]);
var vectorLayer = new ol.layer.Vector({
    source: so
});
var map = new ol.Map({
    layers: [//地图图层
        tile,vectorLayer
    ],
    view: new ol.View({
        center: center,
        minZoom:5,//设置缩放的最大和最小级别
        maxZoom:18,
        zoom: 17//设置默认加载的级别
    }),
    target: 'map'//要显示地图的DIV的ID
});
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var popup = new ol.Overlay({
    element: container
  });
closer.onclick = function() {
    popup.setPosition(undefined);
    closer.blur();
    return false;
};	
map.addOverlay(popup);
map.on('singleclick', function(evt) {
    var coordinate = evt.coordinate;
    var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));
	showInfo(coordinate,hdms);
});
pathBack(vectorLayer,pl);
function pathBack(trailLayer, points) {
    map.getView().setCenter(ol.proj.transform(points[0], 'EPSG:4326', 'EPSG:3857'));
	if(pathBackTimer)
		clearInterval(pathBackTimer);
	var lineStyle = new ol.style.Style({
		stroke: new ol.style.Stroke({
			width: 3,
			color: [255, 0, 0, 1]
		})
	});
	var pointList = new Array();
	for(var i = 0; i < points.length; i++) {
		var pointFeature = new ol.Feature({
			geometry: new ol.geom.Point(ol.proj.transform(points[i], 'EPSG:4326', 'EPSG:3857'))
		})
		if(pointFeature != null) {
			pointList.push(pointFeature);
		}
	}
	var j = 0;
	pathBackTimer = setInterval(function() {
		if(j + 1 <= pointList.length) {
			if(j > 0) {
				var twoCoordinatePoint = new Array();
				var coordinateFirst = pointList[j - 1].getGeometry().getCoordinates();
				var coordinateSecond = pointList[j].getGeometry().getCoordinates();
				twoCoordinatePoint.push(coordinateFirst);
				twoCoordinatePoint.push(coordinateSecond);
				var lineString = new ol.geom.LineString(twoCoordinatePoint);

				var lineFeature = new ol.Feature({
					geometry: lineString
				});
				lineFeature.setStyle(lineStyle);
				trailLayer.getSource().addFeature(lineFeature);
				//pointList[j - 1].setStyle(null);
				pointList[j].setStyle(getPngStyle(coordinateFirst,coordinateSecond));
			}
			if(j==0||j==(pointList.length-1)){
				pointList[j].setStyle(getSvgStyle());
			}
			trailLayer.getSource().addFeature(pointList[j]);
		} else {
			clearInterval(pathBackTimer);
			j = -1;
			//trailLayer.getSource().clear();
		}
		j++;
	}, 600);
}
function getPngStyle(start,end) {
	var dx = end[0] - start[0];
    var dy = end[1] - start[1];
    var rotation = Math.atan2(dy, dx);
	return new ol.style.Style({
       // geometry: new ol.geom.Point(end),
        image: new ol.style.Icon(({             
		  //color: [255, 0, 0, 1],
		  //crossOrigin: 'anonymous',
          anchor: [0.75, 0.5],
		  name:"5555",
		  src: 'arrow2.png',
          rotateWithView: true,
          rotation: -rotation
        }))
      })
}
function getSvgStyle() {
	// 构建svg的Image对象
	var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">' +
		'<path fill="#FF0000" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>' +
		'<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';
	var mysvg = new Image();
	mysvg.src = 'data:image/svg+xml,' + escape(svg);
	return new ol.style.Style({
		image: new ol.style.Icon({
			img: mysvg, // 设置Image对象
			imgSize: markSvgSize
		})
	});
}
function showInfo(coordinate,info){
	content.innerHTML = '<p>You clicked here:</p><code>' + info +
        '</code>';
    popup.setPosition(coordinate)
}
</script>

qq_35763837

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
openlayer轨迹简单DEMO

代码如下 &lt;html&gt;&lt;head&gt;&lt;title&gt;openlayer轨迹简单DEMO&lt;/title&gt;&lt;link rel="stylesheet" type="text/css" href="ol.css"&gt;&lt;script type="text/javascript"
复制链接

扫一扫

专栏目录