0

我正在使用 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,
        });

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

我还找到了另一种在此示例中放置带有覆盖的标记的方法，因为我在下面对此进行了编码

 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);

但也没有显示这个

有什么建议吗？

4

1 回答 1

2

您的代码与带有标记的示例不同

  1. 标记的位置不会转换为地图的投影（就像您对 所做的那样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])),
  1. 中的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>

结果地图的屏幕截图

要使用与示例中相同的图标，请将其创建为“功能”并在该功能上调用 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>

结果地图的屏幕截图

于 2018-08-19T22:16:09.950 回答