第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

打開圖層跟蹤器不更新

打開圖層跟蹤器不更新

慕絲7291255 2023-06-15 17:40:26
我正在使用開放層構(gòu)建一個(gè)簡單的 ISS 跟蹤器,其中包含來自 API 的坐標(biāo)。地圖和點(diǎn)正確呈現(xiàn),但我無法在不刷新頁面的情況下更新地圖上點(diǎn)的位置。我粘貼下面的代碼。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()
查看完整描述

1 回答

?
烙印99

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>


查看完整回答
反對 回復(fù) 2023-06-15
  • 1 回答
  • 0 關(guān)注
  • 169 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號