首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在ol.Features 3中动态更新OpenLayers几何属性(坐标)

如何在ol.Features 3中动态更新OpenLayers几何属性(坐标)
EN

Stack Overflow用户
提问于 2015-08-11 12:53:53
回答 1查看 3.4K关注 0票数 1

我刚开始使用OpenLayers 3,我正在尝试用坐标动态更新一个功能几何属性,很明显,我遗漏了一些东西,因为这个特性没有移动。到目前为止,我的神是这样的:

Socket.IO

代码语言:javascript
运行
复制
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矢量图标实例

代码语言:javascript
运行
复制
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
});

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

如何继续完成这个简单的任务?我唯一想要的是,当socket.io检测到新的地图数据(mapData.lat,mapData.lon)时,图标可以更新它在地图上的位置。

我试着挖掘不同的对象,并在控制台和文档中读取它们的属性,我在这里搜索了Stackoverflow,但不幸的是没有运气。我是连接到iconFeature,还是必须用另一种方式来实现呢?也许是什么很简单的东西?任何帮助都是非常感谢的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-11 14:30:15

如果要将图标移动到地图上,最好使用ol.Overlay。您可以对每个更改使用marker.setPosition(coord)

工作的小提琴。单击“地图”更改标记的位置。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31942389

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档