我如何在 OpenLayers 3 中动态更新 ol.Features 几何体 属性 (坐标)
how can i dynamically update a ol.Features geometry property ( coordinates ) in OpenLayers 3
我刚刚开始使用 OpenLayers 3,我正在尝试使用坐标动态更新特征几何体 属性,显然我遗漏了一些东西,因为特征没有移动。到目前为止,这是我的上帝:
Socket.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 基于 Vector Icon Example
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)时更新其在地图上的位置的图标。
我试图深入研究不同的对象并在控制台和文档中读取它们的属性,并且我在 Whosebug 上进行了搜索,但遗憾的是没有运气。我是连接到 iconFeature,还是必须以其他方式执行此操作?也许内置了一些非常简单的东西?非常感谢任何帮助。
如果您想在地图上移动图标,最好使用 ol.Overlay
。您可以在每次更改时使用 marker.setPosition(coord)
。
A working fiddle。单击地图以更改标记的位置。
我刚刚开始使用 OpenLayers 3,我正在尝试使用坐标动态更新特征几何体 属性,显然我遗漏了一些东西,因为特征没有移动。到目前为止,这是我的上帝:
Socket.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 基于 Vector Icon Example
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)时更新其在地图上的位置的图标。
我试图深入研究不同的对象并在控制台和文档中读取它们的属性,并且我在 Whosebug 上进行了搜索,但遗憾的是没有运气。我是连接到 iconFeature,还是必须以其他方式执行此操作?也许内置了一些非常简单的东西?非常感谢任何帮助。
如果您想在地图上移动图标,最好使用 ol.Overlay
。您可以在每次更改时使用 marker.setPosition(coord)
。
A working fiddle。单击地图以更改标记的位置。