我正在尝试在
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
});
谢谢
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'