[英]how to add markers with OpenLayers 3
我正在尝试在OpenLayers 3
地图上添加制造商。
我发现的唯一的例子是这样一个在OpenLayers
例如列表。
但该示例使用ol.Style.Icon ,而不是像OpenLayers.Marker中OpenLayers 2
。
第一个问题
唯一的区别是您必须设置图像 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
})
});
如果我想添加许多标记,是否必须为每个标记创建 1 个图层?
如何向图层添加多个标记? 我不知道这部分会是什么样子
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
谢谢
一季度。 标记在 OpenLayers 2 中被认为已弃用,尽管从文档中这不是很明显。 相反,您应该使用 OpenLayers.Feature.Vector 并在其样式中将 externalGraphic 设置为某些图像源。 这个概念已经延续到 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 以便将其应用于添加到图层的所有要素,而不必在单个要素上设置样式,假设您希望它们成为一样,很明显。
编辑:那个答案似乎不起作用。 这是一个更新的小提琴,它通过使用 vectorSource.addFeature 将特征(图标)添加到循环中的空向量源,然后将整个批次添加到层向量中。 在更新我的原始答案之前,我会等着看这是否适合您。
有一个很好的教程: 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);
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);
我们刚刚完成了我们的网站NUFOSMATIC从 ol2 到 ol6 的更新。 ol2 和 ol3 代码都在网站上。 这包括 Matt Walker 的 ol-layerswitcher https://github.com/walkermatt替换丢失的 ol2 layerswitcher。 我们实际上更新了三个地图应用程序; HEATMAP 将 Patrick Wied ( http://www.patrick-wied.at ) ol2 热图替换为原生 ol6 热图。
只用了6天。 想知道为什么我们等了这么久......哦,是的,我们有日常工作......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.