Fatal编程技术网
  • openlayers/
  • 在OpenLayers 5中向地图添加要素

在OpenLayers 5中向地图添加要素

openlayers

在OpenLayers 5中向地图添加要素,openlayers,openlayers-5,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/o

我有以下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>


矢量样式示例
var map=新ol.map({
视图：新的ol.view（{center:ol.proj.transform（[16.9278,52.4044]，'EPSG:4326'，'EPSG:3857'），zoom:12}），
图层：[新建ol.layer.Tile({
来源：new ol.source.OSM（）
})],
目标：'map'
});
变量标记=新的ol.特征({
几何：新的ol.几何.点（ol.项目变换（[16.9071388,52.4901917]，'EPSG:4326'，'EPSG:3857'），
});
var markers=新的ol.source.Vector({
特征：[标记]
});
var markerVectorLayer=新ol.layer.Vector({
资料来源：markers，
});
map.addLayer（markerVectorLayer）；
它不显示任何点，只显示地图。在控制台中，我得到错误“ol.geom.point不是构造函数”。此代码主要基于本教程 改变

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

并将视图中的缩放从12更改为11（否则，该点位于此处，但在初始视图之外，需要缩小）

PS：不确定你从哪里得到的
ol.geometry.point
，因为你参考的教程中从未提到过它

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

并将视图中的缩放从12更改为11（否则，该点位于此处，但在初始视图之外，需要缩小）

PS：我不知道你从哪里得到了
ol.geometry.point
，因为你参考的教程中从未提到过它好的，我知道它为什么不起作用。您必须键入“ol.geom.Point”而不是“ol.geom.Point”（大写）。

好的，我知道它为什么不起作用。您必须键入“ol.geom.Point”而不是“ol.geom.Point”（大写）。

更改此选项

 ol.geometry.point
对此

ol.geometry.Point
它会起作用的。

改变这个

 ol.geometry.point
对此

ol.geometry.Point
它会工作。

我在控制台中得到“ol.geom.point不是构造函数”错误，然后。这是我的答案。。。看看这个例子，我的答案没有问题。您可以使用不同版本的OpenLayers（例如4.x）或bundler？我在控制台中得到“ol.geom.point不是构造函数”错误。这是我的答案。。。看看这个例子，我的答案没有问题。您可以使用不同版本的OpenLayers（例如4.x）或bundler？