打开图层跟踪器不更新

Question

我正在使用开放层构建一个简单的 ISS 跟踪器，其中包含来自 API 的坐标。地图和点正确呈现，但我无法在不刷新页面的情况下更新地图上点的位置。我粘贴下面的代码。import "ol/ol.css"import Feature from "ol/Feature"import Map from "ol/Map"import Point from "ol/geom/Point"import View from "ol/View"import { Circle, Fill, Style } from "ol/style"import { OSM, Vector as VectorSource } from "ol/source"import { Tile, Vector } from "ol/layer"import { fromLonLat } from "ol/proj"const getISSPosition = () => {    fetch("https://api.wheretheiss.at/v1/satellites/25544")        .then(res => res.json())        .then(data => {            const ISSPosition = [data.longitude, data.latitude]            const ISSPositionMercator = fromLonLat(ISSPosition)            const map = new Map({                layers: [                    new Tile({                        source: new OSM()                    })                ],                target: "map",                view: new View({                    center: [ISSPositionMercator[0], ISSPositionMercator[1]],                    zoom: 2                })            })            const positionFeature = new Feature()            positionFeature.setStyle(                new Style({                    image: new Circle({                        radius: 4,                        fill: new Fill({                            color: "red"                        })                    })                })            )            positionFeature.setGeometry(new Point(ISSPositionMercator))            new Vector({                map: map,                source: new VectorSource({                    features: [positionFeature]                })            })        })}getISSPosition()

Answer 1

将对服务的调用与地图的构建分开。构建一次地图，然后通过调用服务定期更新标记的位置setInterval。

创建地图：

const map = new ol.Map({

  layers: [

    new ol.layer.Tile({

      source: new ol.source.OSM()

    })

  ],

  target: "map",

  view: new ol.View({

    center: [0, 0],

    zoom: 2

  })

})

positionFeature.setStyle(

  new ol.style.Style({

    image: new ol.style.Circle({

      radius: 4,

      fill: new ol.style.Fill({

        color: "red"

      })

    })

  })

)

new ol.layer.Vector({

  map: map,

  source: new ol.source.Vector({ // VectorSource({

    features: [positionFeature]

  })

});

更新标记：

const updateISSPosition = () => {

  fetch("https://api.wheretheiss.at/v1/satellites/25544")

    .then(res => res.json())

    .then(data => {

      const ISSPosition = [data.longitude, data.latitude]

      const ISSPositionMercator = ol.proj.fromLonLat(ISSPosition);

      positionFeature.setGeometry(new ol.geom.Point(ISSPositionMercator));

      map.getView().setCenter(ISSPositionMercator);

      console.log(ISSPositionMercator);

    });

}

概念证明小提琴

代码片段：

const positionFeature = new ol.Feature();

const updateISSPosition = () => {

  fetch("https://api.wheretheiss.at/v1/satellites/25544")

    .then(res => res.json())

    .then(data => {

      const ISSPosition = [data.longitude, data.latitude]

      const ISSPositionMercator = ol.proj.fromLonLat(ISSPosition);

      positionFeature.setGeometry(new ol.geom.Point(ISSPositionMercator));

      map.getView().setCenter(ISSPositionMercator);

      console.log(ISSPositionMercator);

    });

}

const map = new ol.Map({

  layers: [

    new ol.layer.Tile({

      source: new ol.source.OSM()

    })

  ],

  target: "map",

  view: new ol.View({

    center: [0, 0],

    zoom: 2

  })

})

positionFeature.setStyle(

  new ol.style.Style({

    image: new ol.style.Circle({

      radius: 4,

      fill: new ol.style.Fill({

        color: "red"

      })

    })

  })

)

new ol.layer.Vector({

  map: map,

  source: new ol.source.Vector({ // VectorSource({

    features: [positionFeature]

  })

});

updateISSPosition();

setInterval(updateISSPosition, 5000);

html,

body {

  height: 100%;

  width: 100%;

  padding: 0px;

  margin: 0px;

}

.map {

  height: 90%;

  width: 100%;

}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>

<title>OpenLayers example</title>

<b>My Map</b>

<div id="map" class="map"></div>