如何动态更新ol.特征几何属性(坐标)在OpenLayers 3

how can i dynamically update a ol.Features geometry property ( coordinates ) in OpenLayers 3

本文关键字：属性 坐标 OpenLayers 何属性 ol 动态 何动态 更新 特征      更新时间：2023-09-26

我刚刚开始使用OpenLayers 3，我正试图动态更新带有坐标的特征几何属性，显然有些东西我错过了，因为特征没有移动。以下是我目前所看到的:

插座。IO 

socket.on('mapData', function(mapData) {
    if (mapisloaded) {
            latLon = ol.proj.transform([mapData.lon, mapData.lat], 'EPSG:4326', 'EPSG:3857');
        // Initiate latlong object with mapData
        if (centerIsRequested) {
            //Center map with mapData
        };
        // Update marker with latlong from mapData
    };
});

OpenLayers 3基于矢量图标示例

var latLon = ol.proj.transform([10.904108, 59.788187], 'EPSG:4326', 'EPSG:3857');
var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(latLon),
    name: 'Null Island',
    population: 4000,
    rainfall: 500
});
var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'imgs/lc.png'
    }))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
    features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});
var baseLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});
var view = new ol.View({
    center: latLon,
    zoom: 18,
});
var map = new ol.Map({
    target: 'map-canvas',
    layers: [ baseLayer, vectorLayer ],
    view: view
});

变化显然没有改变，但我知道魔法并不存在，它只是为了放下一些东西开始。

i go forward如何完成这个简单的任务?我唯一想要的是图标更新其在地图上的位置时套接字。io检测新的mapdata (mapdata . io)。lat mapData.lon)。

我试着去挖掘不同的对象，并在控制台和文档中读取它们的属性，我在这里搜索了Stackoverflow，但遗憾的是没有运气。我挂钩到iconFeature，还是我必须做这另一种方式?也许里面有很简单的东西?

如果您想在地图上移动图标，最好使用ol.Overlay。您可以在每个更改上使用marker.setPosition(coord)。

一个工作的小提琴。点击地图改变标记位置

相关文章：