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浏览器的控制台中没有任何错误，但只是不显示图标和标记，因为这是{{{ 3}}

当我在下面编写代码时，我还找到了另一种在Example_Marker中放置叠加标记的方法

 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])),

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

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,
             })]

然后出现“标记”，但样式不正确。

代码段：

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>

要使用与示例相同的Icon，请将其创建为“功能”，然后在功能上调用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中获取标记或任何图标

1 个答案: