Добавление маркеров карты в Open Layers 6 - PullRequest
Новая
       9

Добавление маркеров карты в Open Layers 6

0 голосов
/ 13 января 2020

Мой вопрос прост: Как добавить маркер с указанными c долготой и широтой?

Работа с открытыми слоями Пример страницы I создал новую карту с маркером.

Я добавил маркер, используя new ol.Feature, но кажется, , независимо от того, какие я установил координаты для положения маркера, не изменится .

Пожалуйста, кто-нибудь может посоветовать, почему маркер карты не отображается в правильном положении? 

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point([53, -2]), //This marker will not move.
  name: 'Somewhere',
});

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [iconFeature]
      }),
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        })
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([53,-2]),
    zoom: 6
  })
});
.map {
  width: 100%;
  height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

<div id="map" class="map">
  <div id="popup"></div>
</div>

Ответы [ 2 ]

1 голос
/ 14 января 2020

Вы можете использовать ol.proj.fromLonLat для преобразования EPSG:4326 в EPSG:3857 как для объектов, так и для центрирования карты. В общем случае вы должны сделать это, поскольку проекция по умолчанию - EPSG:3857.

для значков: 

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-2, 53])),
  name: 'Somewhere near Nottingham',
});

, чтобы центрировать вид / карту в том же месте: 

view: new ol.View({
  center: ol.proj.fromLonLat([-2, 53]),
  zoom: 6
})

фрагмент рабочего кода: 

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-2, 53])),
  name: 'Somewhere near Nottingham',
});

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [iconFeature]
      }),
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        })
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-2, 53]),
    zoom: 6
  })
});
html, body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}
.map {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

<div id="map" class="map">
  <div id="popup"></div>
</div>
1 голос
/ 13 января 2020

По умолчанию в качестве проекции 3857, единица измерения - метры.

Поэтому введенные вами координаты находятся на расстоянии 53 метра от [0; 0], в море, не слишком далеко от Нигерии.

Вы можете ввести координату в 3857, например 

geometry: new ol.geom.Point([-8185391,5695875]),

или вам придется проецировать координаты на 3857, как указано в комментариях, используя ol.proj.fromLonLat([53,-2])

Помните, что координаты сначала выражаются в виде долготы, а затем широты, как объяснено в сделать c.

...