javascript 用openlayers在给定坐标的Map上画点？

yfwxisqw 于 2023-03-28 发布在 Java

关注(0)|答案(2)|浏览(135)

我试图从一个包含大约300个经纬度坐标的表格中在openlayersMap上绘制大约300个点。我在他们的网站上找到了关于如何做到这一点的所有draw features，但它可以通过用户点击鼠标绘制一个点，而不是自动绘制。有没有办法从代码中绘制Map上的一个点？谢谢。

JavaScript

来源：https://stackoverflow.com/questions/60775622/draw-point-on-map-given-coordinates-with-openlayers

2条答案

按热度按时间

jjjwad0x1#

要在Map上绘制点（或任何其他几何图形），您只需要，
1.使用要绘制的要素创建源（在本例中为矢量源）。
1.使用步骤1中的源代码和您喜欢的样式创建一个层，在本例中为矢量层。
1.将图层添加到Map。
这就是你需要做的。看看我为你做的例子，它生成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>

赞(0）回复(0）举报 2023-03-28

tjvv9vkg2#

我在OpenLayers中添加了一个点到Map，代码如下：
创建点几何图形

var point = new ol.geom.Point([545377.5290934666, 6867785.761987235]);

使用点几何创建要素

var feature = new ol.Feature({
  geometry: point
});

创建矢量图层以保存点要素

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [feature]
  })
});

将矢量稍后添加到Map中：

map.addLayer(vectorLayer);

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 用openlayers在给定坐标的Map上画点？

2条答案

相关问题

热门标签

最新问答