在OpenLayers 5中向地图添加要素

时间:2018-08-24 08:49:49

标签: openlayers openlayers-5

我有以下HTML代码

<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet"> 
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
    view: new ol.View({center: ol.proj.transform([16.9278, 52.4044], 'EPSG:4326', 'EPSG:3857'), zoom:12}),
    layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
    })],
    target:'map'
});

var marker = new ol.Feature({
    geometry: new ol.geometry.point(ol.proj.transform([16.9071388, 52.4901917], 'EPSG:4326', 'EPSG:3857')),
});

var markers = new ol.source.Vector({
    features: [marker]
});

var markerVectorLayer = new ol.layer.Vector({
    source: markers,
});
map.addLayer(markerVectorLayer);

</script>
</body>
</html>

它不显示任何点,仅显示地图。在控制台中,出现错误“ ol.geom.point不是构造函数”。该代码主要基于本教程 https://medium.com/attentive-ai/working-with-openlayers-4-part-2-using-markers-or-points-on-the-map-f8e9b5cae098

3 个答案:

答案 0 :(得分:4)

更改

BarSeries

// this is the color of bar series
if (chartSeries.Key.ColorHex != null)
{
    Style style = new Style(typeof(Border));
    style.Setters.Add(new Setter(Border.BackgroundProperty, (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex))));
    style.Setters.Add(new Setter(Border.BorderThicknessProperty, new Thickness(2.0)));
    barSerie.DefaultVisualStyle = style;
}

,然后将视图中的缩放比例从12更改为11(否则,该点在此处,但位于初始视图之外,您需要缩小)

PS:不确定var marker = new ol.Feature({ geometry: new ol.geometry.point(ol.proj.transform([16.9071388, 52.4901917], 'EPSG:4326', 'EPSG:3857')), }); 的来源,因为您在参考的教程中从未提及

答案 1 :(得分:1)

更改此

 ol.geometry.point

对此

ol.geometry.Point

它将起作用。

答案 2 :(得分:0)

好的,我知道为什么它不起作用。您必须输入“ ol.geom.Point”而不是“ ol.geom.point”(大写)。