1 回答

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超13個(gè)贊
將對服務(wù)的調(diào)用與地圖的構(gòu)建分開。構(gòu)建一次地圖,然后通過調(diào)用服務(wù)定期更新標(biāo)記的位置setInterval。
創(chuàng)建地圖:
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]
})
});
更新標(biāo)記:
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>
添加回答
舉報(bào)