如何使用OpenLayers 3添加标记
如何使用OpenLayers 3添加标记
提问于 2014-06-20 04:35:16
我正在尝试在OpenLayers 3地图上添加makers。
我找到的唯一示例是OpenLayers示例list中的this one。
但是这个示例在OpenLayers 2中使用了ol.Style.Icon而不是OpenLayers.Marker之类的东西。
第一个问题
唯一的区别是您必须设置图像Url，但这是添加标记的唯一方法吗？
此外，OpenLayers 3似乎没有提供标记图像，所以如果除了ol.Style.Icon之外没有其他方法，这也是有意义的
第二个问题
如果有人能给我一个在地图加载后添加标记或图标的功能示例，那就太好了。
根据我在示例中的理解，他们为图标创建了一个层
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')),
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: 'data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});然后在初始化地图时设置图标图层
var map = new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
target: document.getElementById('map'),
view: new ol.View2D({
center: [0, 0],
zoom: 3
})
});如果我想添加许多标记，我必须为每个标记创建一个层吗？
如何在一个图层中添加多个标记？我不知道这部分会是什么样子
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-06-20 05:59:16
Q1。标记在OpenLayers 2中被认为是不推荐使用的，尽管这在文档中并不是很明显。相反，您应该使用externalGraphic设置为其样式中某个图像源的OpenLayers.Feature.Vector。这个概念已经被带到了OpenLayers 3中，所以没有标记类，它是按照你引用的例子来做的。
Q2。ol.source.Vector接受一个特征数组，注意这一行，features : iconFeature，因此您将创建一个图标特征数组并向其中添加特征，例如：
var iconFeatures=[];
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconFeature1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-73.1234, 45.678], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island Two',
population: 4001,
rainfall: 501
});
iconFeatures.push(iconFeature);
iconFeatures.push(iconFeature1);
var vectorSource = new ol.source.Vector({
features: iconFeatures //add an array of features
});
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: 'data/icon.png'
}))
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});显然，这可以通过将所有ol.Feature创建放在基于某个数据源的循环中来更优雅地处理，但我希望这演示了这种方法。还请注意，您可以将样式应用于ol.layer.Vector，以便将其应用于要添加到图层的所有要素，而不必在单个要素上设置样式，显然，假设您希望它们是相同的。
编辑:这个答案似乎不起作用。这是一个更新的fiddle，它的工作原理是使用vectorSource.addFeature将特征(图标)添加到循环中的空向量源，然后将整个块添加到层向量中。在更新我的原始答案之前，我会等着看这对你是否有效。
Stack Overflow用户
发布于 2016-04-26 18:59:55
有一个很好的教程：http://openlayersbook.github.io
未经过测试，但可能会有所帮助
var features = [];
//iterate through array...
for( var i = 0 ; i < data.length ; i++){
var item = data[i]; //get item
var type = item.type; //get type
var longitude = item.longitude; //coordinates
var latitude = item.latitude;
/*....
* now get your specific icon...('..../ic_customMarker.png')
* by e.g. switch case...
*/
var iconPath = getIconPath(type);
//create Feature... with coordinates
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
'EPSG:3857'))
});
//create style for your feature...
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: iconPath
}))
});
iconFeature.setStyle(iconStyle);
features.push(iconFeature);
//next item...
}
/*
* create vector source
* you could set the style for all features in your vectoreSource as well
*/
var vectorSource = new ol.source.Vector({
features: features //add an array of features
//,style: iconStyle //to set the style for all your features...
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);Stack Overflow用户
发布于 2015-10-29 19:14:00
var exampleLoc = ol.proj.transform(
[131.044922, -25.363882], 'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
view: new ol.View2D({
projection: 'EPSG:3857',
zoom: 3,
center: exampleLoc
}),
layers: [
new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})})
]
});
map.addOverlay(new ol.Overlay({
position: exampleLoc,
element: $('<img src="resources/img/marker-blue.png">')
.css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
.tooltip({title: 'Hello, world!', trigger: 'click'})
}));
map.on('postcompose', function(evt) {
evt.vectorContext.setFillStrokeStyle(
new ol.style.Fill({color: 'rgba(255, 0, 0, .1)'}),
new ol.style.Stroke({color: 'rgba(255, 0, 0, .8)', width: 3}));
evt.vectorContext.drawCircleGeometry(
new ol.geom.Circle(exampleLoc, 400000));
});
var exampleKml = new ol.layer.Vector({
source: new ol.source.KML({
projection: 'EPSG:3857',
url: 'data/example.kml'
})
});
map.addLayer(exampleKml);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24315801
复制相关文章
相似问题