如何使用 OSM 在 openstreetmap 中获取标记或任何图标

Question

我正在使用 Ol V5.3.1 并使用 asp mvc，这是我获取地图和特定位置的标记或任何图标以显示我的位置的代码

 var view = new ol.View({
            center: ol.proj.fromLonLat([51.40876293182373, 35.757448286487595]),
            zoom: 12,
            maxZoom: 19,
        });

var rasterLayer = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        var VactorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: new ol.Feature({
                    geometry: new ol.geom.Point([51, 35]),
                    name: 'Null Island',
                    population: 4000,
                    rainfall: 500,
                    setStyle: new ol.style.Style({
                        image: new ol.style.Icon({
                            anchor: [0.5, 46],
                            anchorXUnits: 'fraction',
                            anchorYUnits: 'pixels',
                            src: "http://openlayers.org/en/v3.7.0/examples/data/icon.png",
                        })
                    })
                })
            })
        });

var map = new ol.Map({
            target: 'map',
            controls: new ol.control.defaults({
                attributionOptions: {
                    collapsible: false
                }
            }),
            layers: [rasterLayer, VactorLayer],
            view: view,
        });

一切都很好，显示了带有我的位置的图块和地图，我的浏览器控制台中没有任何 javascript 错误，但只是不显示图标和标记，因为这是一个使用矢量图层的 openlayer 示例，位于Example_Marker

我还找到了另一种方法来在 this Example 中放置带有叠加层的标记，因为我在下面对此进行了编码

 var marker = new ol.Overlay({
            position: pos,
            positioning: 'center-center',
            element: document.getElementById('marker'),
            stopEvent: false
        });

    var pos = new ol.proj.fromLonLat([51, 35]);

        map.addOverlay(marker);

但也没有显示这个

有什么建议吗？

Answer 1

您的代码与 example with the marker

不同

标记的位置未转换为地图的投影（就像您使用 center 所做的那样）：

var VactorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.Feature({
                geometry: new ol.geom.Point([51, 35]),

应该是：

var VactorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([51, 35])),

VectorSource中的features数组应该是数组：

var VactorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.Feature({
                geometry: new ol.geom.Point([51, 35]),
                name: 'Null Island',
                population: 4000,
                rainfall: 500,
            })

应该是：

var VactorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point([51, 35]),
                name: 'Null Island',
                population: 4000,
                rainfall: 500,
             })]

然后 "marker" 出现，但没有正确的样式。

代码片段：

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 95%;
  width: 100%;
}

<link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>

<div id="map" class="map"></div>
<script>
  var view = new ol.View({
    center: ol.proj.fromLonLat([51.40876293182373, 35.757448286487595]),
    zoom: 6,
    maxZoom: 19,
  });

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var VactorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([51, 35])),
        name: 'Null Island',
        population: 4000,
        rainfall: 500,
        setStyle: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: "http://openlayers.org/en/v3.7.0/examples/data/icon.png",
          })
        })
      })]
    })
  });

  var map = new ol.Map({
    target: 'map',
    controls: new ol.control.defaults({
      attributionOptions: {
        collapsible: false
      }
    }),
    layers: [rasterLayer, VactorLayer],
    view: view,
  });
</script>

要使用与示例中相同的图标，请将其创建为 "feature" 并在功能上调用 setStyle（没有 setStyle 属性功能）。

var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([51, 35])),
            name: 'Null Island',
            population: 4000,
            rainfall: 500,
        });
iconFeature.setStyle(new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 46],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: "http://openlayers.org/en/v3.7.0/examples/data/icon.png",
                })
            }));
var VactorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [iconFeature]
    })
});

代码片段：

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 95%;
  width: 100%;
}

<link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>

<div id="map" class="map"></div>
<script>
  var view = new ol.View({
    center: ol.proj.fromLonLat([51.40876293182373, 35.757448286487595]),
    zoom: 7,
    maxZoom: 19,
  });

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([51, 35])),
    name: 'Null Island',
    population: 4000,
    rainfall: 500,
  });
  iconFeature.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: "http://openlayers.org/en/v3.7.0/examples/data/icon.png",
    })
  }));
  var VactorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [iconFeature]
    })
  });

  var map = new ol.Map({
    target: 'map',
    controls: new ol.control.defaults({
      attributionOptions: {
        collapsible: false
      }
    }),
    layers: [rasterLayer, VactorLayer],
    view: view,
  });
</script>

如何使用 OSM 在 openstreetmap 中获取标记或任何图标

how to get marker or any icon in openstreetmap using OSM

javascript

webpage

openstreetmap

openlayers-5