关于 javascript：如何使用 OpenLayers 3 添加标记


how to add markers with OpenLayers 3

我正在尝试在 OpenLayers 3 地图上添加制造商。

我发现的唯一示例是 OpenLayers 示例列表中的这个示例。

但该示例使用 ol.Style.Icon 而不是 OpenLayers 2.

中的 OpenLayers.Marker

第一个问题

唯一的区别是您必须设置图像网址，但这是添加标记的唯一方法吗？

另外 OpenLayers 3 似乎没有标记图像，所以如果除了 ol.Style.Icon

之外别无他法

第二个问题

如果有人能给我一个在地图加载后添加标记或图标的函数示例，那就太好了。

根据我在示例中的理解，他们为图标创建了一个图层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
});

然后他们在初始化地图时设置图标层

1
2
3
4
5
6
7
8
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 个图层？

如何在一个图层中添加许多标记？我不知道这部分会是什么样子
喜欢

1
2
3
4
5
6
7
var vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

谢谢

相关讨论

Q1。标记在 OpenLayers 2 中被认为已弃用，尽管这在文档中并不是很明显。相反，您应该使用 OpenLayers.Feature.Vector 并将 externalGraphic 设置为其样式中的某个图像源。这个概念已被延续到 OpenLayers 3，因此没有标记类，并且按照您引用的示例完成。

Q2。 ol.source.Vector 采用一组特征，注意这一行，特征：[iconFeature]，因此您将创建一组图标特征并向其中添加特征，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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

未测试但可能有用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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);
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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 天。想知道为什么我们等了这么久......哦，是的，我们有日常工作......