Карта OpenLayers не отображается - PullRequest
0 голосов
/ 17 сентября 2018

Я пытался использовать Google API, чтобы сделать карту на моем сайте, однако, чтобы использовать это сейчас, вы должны заплатить немало.В любом случае, я нашел API OpenLayers и его классное приложение, но все же, когда я запрашиваю карту в центре моего текущего местоположения, карта больше не отображается .-.Я не получаю ошибок в своей консоли, и я даже использовал обещания, поэтому карта начнет рендерить, как только я получу координаты.

это мой код index.js

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

var lng;
var lat;

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (position) {
    lat = Promise.resolve(position.coords.latitude);
    lng = Promise.resolve(position.coords.longitude);
    Promise.all([lat, lng]).then((res) => {
      console.log(res);
      const map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        view: new View({
          center: [lat, lng],
          zoom: 0
        })
      });
    })
  })
}

И этомой HTML-код

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

, чтобы запустить все это, я использую узел, и если я получу карту констант из условной, карта будет отображаться, однако это не будет центр, который я хочу видеть:D

1 Ответ

0 голосов
/ 18 сентября 2018

Проекция карты OpenLayers по умолчанию - EPSG:3857. Координаты, полученные API геолокации, находятся в проекции EPSG:4326.

Вам необходимо либо преобразовать полученные координаты в EPSG:3857 (например, с помощью fromLonLat ), либо установить проекцию карты на EPSG:4326.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...