打开图层跟踪器不更新

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({&nbsp; layers: [&nbsp; &nbsp; new ol.layer.Tile({&nbsp; &nbsp; &nbsp; source: new ol.source.OSM()&nbsp; &nbsp; })&nbsp; ],&nbsp; target: "map",&nbsp; view: new ol.View({&nbsp; &nbsp; center: [0, 0],&nbsp; &nbsp; zoom: 2&nbsp; })})positionFeature.setStyle(&nbsp; new ol.style.Style({&nbsp; &nbsp; image: new ol.style.Circle({&nbsp; &nbsp; &nbsp; radius: 4,&nbsp; &nbsp; &nbsp; fill: new ol.style.Fill({&nbsp; &nbsp; &nbsp; &nbsp; color: "red"&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })&nbsp; }))new ol.layer.Vector({&nbsp; map: map,&nbsp; source: new ol.source.Vector({ // VectorSource({&nbsp; &nbsp; features: [positionFeature]&nbsp; })});更新标记：const updateISSPosition = () => {&nbsp; fetch("https://api.wheretheiss.at/v1/satellites/25544")&nbsp; &nbsp; .then(res => res.json())&nbsp; &nbsp; .then(data => {&nbsp; &nbsp; &nbsp; const ISSPosition = [data.longitude, data.latitude]&nbsp; &nbsp; &nbsp; const ISSPositionMercator = ol.proj.fromLonLat(ISSPosition);&nbsp; &nbsp; &nbsp; positionFeature.setGeometry(new ol.geom.Point(ISSPositionMercator));&nbsp; &nbsp; &nbsp; map.getView().setCenter(ISSPositionMercator);&nbsp; &nbsp; &nbsp; console.log(ISSPositionMercator);&nbsp; &nbsp; });}概念证明小提琴代码片段：const positionFeature = new ol.Feature();const updateISSPosition = () => {&nbsp; fetch("https://api.wheretheiss.at/v1/satellites/25544")&nbsp; &nbsp; .then(res => res.json())&nbsp; &nbsp; .then(data => {&nbsp; &nbsp; &nbsp; const ISSPosition = [data.longitude, data.latitude]&nbsp; &nbsp; &nbsp; const ISSPositionMercator = ol.proj.fromLonLat(ISSPosition);&nbsp; &nbsp; &nbsp; positionFeature.setGeometry(new ol.geom.Point(ISSPositionMercator));&nbsp; &nbsp; &nbsp; map.getView().setCenter(ISSPositionMercator);&nbsp; &nbsp; &nbsp; console.log(ISSPositionMercator);&nbsp; &nbsp; });}const map = new ol.Map({&nbsp; layers: [&nbsp; &nbsp; new ol.layer.Tile({&nbsp; &nbsp; &nbsp; source: new ol.source.OSM()&nbsp; &nbsp; })&nbsp; ],&nbsp; target: "map",&nbsp; view: new ol.View({&nbsp; &nbsp; center: [0, 0],&nbsp; &nbsp; zoom: 2&nbsp; })})positionFeature.setStyle(&nbsp; new ol.style.Style({&nbsp; &nbsp; image: new ol.style.Circle({&nbsp; &nbsp; &nbsp; radius: 4,&nbsp; &nbsp; &nbsp; fill: new ol.style.Fill({&nbsp; &nbsp; &nbsp; &nbsp; color: "red"&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })&nbsp; }))new ol.layer.Vector({&nbsp; map: map,&nbsp; source: new ol.source.Vector({ // VectorSource({&nbsp; &nbsp; features: [positionFeature]&nbsp; })});updateISSPosition();setInterval(updateISSPosition, 5000);html,body {&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; padding: 0px;&nbsp; margin: 0px;}.map {&nbsp; height: 90%;&nbsp; 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>