【问题标题】:Update marker position json Leaflet and WebGLEarth更新标记位置 json Leaflet 和 WebGLEarth
【发布时间】:2015-01-19 10:47:18
【问题描述】:

这个问题与这个问题有关:Updating Leaflet Marker Position Every x Seconds with JSON。只有我想将使用 Leaflet 创建的地图投影到使用 WebGLEarth 的 3D 地球上。通常,您可以通过在原始 Leaflet 代码中将 L.map、L.marker 等替换为 WE.map、WE.marker 来组合 Leaflet 和 WebGLEarth。

我想将国际空间站的当前位置投影到我的 3D 地球仪上,所以我替换了这段代码的 update_position 函数中的 L.marker...

var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg';
            var subDomains = ['otile1','otile2','otile3','otile4'];
            var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 11,     subdomains: subDomains});

            var map = new L.Map('map', {layers : [cloudmade]}).fitWorld();

var iss;

function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
    console.log(data);
    var latitude = data["iss_position"]["latitude"];
    var longitude = data["iss_position"]["longitude"];
    if (!iss) {
        iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
        }
    iss.setLatLng([latitude,longitude]).update();
    setTimeout(update_position, 1000);
    });
   }

update_position();

DEMO

...由 WE.marker 提供。不幸的是,位置的更新在我的 3D 地球仪上不再起作用,而在 2D 地图上确实起作用。 我尝试添加

setInterval(update_position,2000);

就在 update_position(); 上方,然后标记会更新几次 (~5),然后突然停止。如果我通过平移与地球上的鼠标进行交互,则标记会更新到其当前位置并在之后更新几次,最终再次停止。

主要问题: 有谁知道如何解决这个问题,以便我有一个连续的标记更新?

附加问题: 理想情况下,我希望国际空间站轨道看起来像https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML.html&label=Showcases,并带有一条彩色路径,该路径是空间站在其最后绕地球轨道运行的路径。关于如何做到这一点的任何提示?

提前致谢!

[编辑 23-1-2015: 我设法通过为 iis 创建一个新变量来不断更新它,即 iis2。为什么这行得通我不清楚。不幸的是,所有“旧”标记位置都没有消失,所以我得到一个模糊的标记轨迹。

    var iss;
var iis2;

function update_position() {
    $.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
        console.log(data);
        var latitude = data["iss_position"]["latitude"];
        var longitude = data["iss_position"]["longitude"];
        if (!iss) {
            iss2 = WE.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
        }
        iss2.setLatLng([latitude,longitude]).update();
    });
}
update_position();
setInterval(update_position,1000);

]

【问题讨论】:

    标签: javascript json leaflet cesium


    【解决方案1】:

    删除标记​​p>

    var iss;
    var iis2;
    
    function update_position() {
        $.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
            console.log(data);
            map.removeLayer(iss2);
            var latitude = data["iss_position"]["latitude"];
            var longitude = data["iss_position"]["longitude"];
            if (!iss) {
                iss2 = WE.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
            }
            iss2.setLatLng([latitude,longitude]).update();
        });
    }
    update_position();
    setInterval(update_position,1000);
    

    【讨论】:

    • 试图简化:map.removeLayer(players[player].marker);玩家[玩家].marker = WE.marker(newLatLng).bindPopup(player).addTo(map); Got: player.js:37 Uncaught TypeError: map.removeLayer is not a function
    • iss2.removeFrom(map);
    猜你喜欢
    • 1970-01-01
    • 2015-10-18
    • 2022-10-24
    • 2021-08-31
    • 1970-01-01
    • 1970-01-01
    • 2013-05-07
    • 2012-01-28
    • 2017-11-24
    相关资源
    最近更新 更多