openlayers轨迹回放Demo

treasurecp

已于 2023-08-11 15:11:31 修改

阅读量840

点赞数

文章标签： html css javascript

于 2021-12-28 16:17:31 首次发布

本文链接：https://blog.csdn.net/treasurecp/article/details/122196126

版权

<!DOCTYPE html>
<html>
  <head>
    <title>openlayers轨迹回放</title>
    <link
      rel="stylesheet"
      href="https://openlayers.org/en/v6.5.0/css/ol.css"
      type="text/css"
    />
    <script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>
    <style>
      html,
      body,
      #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script>
    //初始化地图
    var map = new ol.Map({
      target: "map",
      layers: [
        new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          }),
        }),
      ],
      view: new ol.View({
        center: [120.86129891934904, 30.876200859534276],
        projection: "EPSG:4326",
        zoom: 13.4,
      }),
    });

    function addlinestring(routeCoords) {
      //添加线
      route = new ol.geom.LineString(routeCoords);
      routeFeature = new ol.Feature({
        type: "route",
        geometry: route,
      });
      //添加起点
      let startMarker = new ol.Feature({
        type: "icon",
        geometry: new ol.geom.Point(route.getFirstCoordinate()),
      });
      //添加终点
      let endMarker = new ol.Feature({
        type: "icon",
        geometry: new ol.geom.Point(route.getLastCoordinate()),
      });
      //绘制移动的点
      position = startMarker.getGeometry().clone();
      geoMarker = new ol.Feature({
        type: "geoMarker",
        geometry: position,
      });
      styles = {
        route: new ol.style.Style({
          stroke: new ol.style.Stroke({
            width: 6,
            color: [237, 212, 0, 1],
          }),
        }),
        icon: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({ color: [0, 0, 255, 1] }),
          }),
        }),
        geoMarker: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({ color: [0, 255, 0, 1] }),
          }),
        }),
      };
      layerss = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [routeFeature, geoMarker, startMarker, endMarker],
        }),
        style: function (feature) {
          return styles[feature.get("type")];
        },
      });
      map.addLayer(layerss);
      startAnimation();
    }
    let animating = false;
    let distance = 0;
    let lastTime;
    function moveFeature(event) {
      let speed = 50; //移动速度
      let time = event.frameState.time;
      let elapsedTime = time - lastTime;
      distance = (distance + (speed * elapsedTime) / 1e6) % 2;
      lastTime = time;
      let currentCoordinate = route.getCoordinateAt(
        distance > 1 ? 2 - distance : distance
      );
      position.setCoordinates(currentCoordinate);
    }
    //开始移动
    function startAnimation() {
      animating = true;
      lastTime = Date.now();
      layerss.on("postrender", moveFeature);
      // geoMarker.setGeometry(null);
    }
    //停止移动
    function stopAnimation() {
      animating = true;
      geoMarker.setGeometry(position);
      layerss.un("postrender", moveFeature);
    }
    //轨迹线
    let routeCoords = [
      [120.83420068030844, 30.834708668385822],
      [120.83600312476644, 30.8362536207784],
      [120.83701163535603, 30.83679006258138],
      [120.83965092902669, 30.838184811269123],
      [120.84926362981518, 30.84256338366904],
      [120.85012544864018, 30.84381214147104],
      [120.85408099742031, 30.851182880348983],
      [120.86836725117884, 30.87103376118821],
      [120.87796437514476, 30.879769103042214],
      [120.8805888935645, 30.881766871853934],
      [120.8655860429288, 30.901078635664142],
      [120.86059202871014, 30.90893711390783],
      [120.86806024700445, 30.912217546379573],
    ];

    addlinestring(routeCoords);
  </script>
</html>

treasurecp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
openlayers轨迹回放Demo

<!DOCTYPE html><html> <head> <title>openlayers轨迹回放</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css".
复制链接

扫一扫