нарисовать точку на карте с заданными координатами с открытыми слоями? - PullRequest
Новая
       47

нарисовать точку на карте с заданными координатами с открытыми слоями?

0 голосов
/ 20 марта 2020

Я пытаюсь нанести около 300 точек на карту открытых слоев из таблицы примерно 300 широт и долгот. Все, что я нашел о том, как это сделать, это функции рисования с их веб-сайта, но он может построить точку щелчком мыши пользователем, а не автоматически. Есть ли способ построить точку на карте из кода? Спасибо.

1 Ответ

0 голосов
/ 21 марта 2020

Чтобы нарисовать точки (или любую другую геометрию) на карте, вам просто нужно,

  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>
...