使用openlayers在给定坐标的地图上绘制点？

Question

我试图从大约 300 个纬度和经度坐标的表中在 openlayers 地图上绘制大约 300 个点。 我在如何做到这一点上找到的只是他们网站上的绘图功能，但它可以通过用户单击鼠标而不是自动绘制一个点。 有没有办法从代码中在地图上绘制一个点？ 谢谢你。

Answer 1

要在地图上绘制点（或任何其他几何图形），您只需要，

1. 创建一个源，在本例中为矢量源，其中包含您要绘制的要素。
2. 使用步骤 1 中的源和您喜欢的样式创建一个图层，在本例中为矢量图层。
3. 将图层添加到地图。

这就是您需要做的所有事情。 看一下我给你做的例子，它生成了 300 个随机点特征，然后按照我之前描述的步骤进行操作。

 <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script> <title>Random Points From Code</title> </head> <body> <h2>300 Random Points From Code</h2> <div id="map" class="map"></div> <script type="text/javascript"> // generate 300 random points features const getRandomNumber = function (min, ref) { return Math.random() * ref + min; } const features = []; for (i = 0; i < 300; i++) { features.push(new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([ -getRandomNumber(50, 50), getRandomNumber(10, 50) ])) })); } // create the source and layer for random features const vectorSource = new ol.source.Vector({ features }); const vectorLayer = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ image: new ol.style.Circle({ radius: 2, fill: new ol.style.Fill({color: 'red'}) }) }) }); // create map and add layers const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], view: new ol.View({ center: ol.proj.fromLonLat([-75, 35]), zoom: 2 }) }); </script> </body> </html>