Карта не отображается - PullRequest
Новая
       10

Карта не отображается

0 голосов
/ 12 апреля 2019

У меня есть карта с openlayers с osm. Я не могу видеть карту. Это работало раньше, но вдруг это не работает. Когда я использую простейшие настройки для отображения карты, она работает.

Я пробовал несколько разных вещей, таких как деструктура и просмотр кода. Я использую CDN для CSS и JS. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers     /openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
        .map {
          height: 400px;
          width: 100%;
        }

        #header {
            text-align: center;
        }
      </style>
  <title>Open Layers testing</title>
</head>
<body>
<h2>My Map</h2>
<header>
    <div id="header">
    <button id="flyttkanpp" onclick="flytt()">Flytt 300 meter</button>
    </div>
</header>
<div id="map" class="map"></div>
<script type="text/javascript">


    var baseMapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var map = new ol.Map({
        target: 'map',
        view: view,
        layer: [layer]
    });
    var view = new ol.View({
      center: center,
      zoom: 6
    });
    var center = ol.proj.fromLonLat([37.41, 8.82]);
    var layer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    var featureMarker = new ol.Feature({
        geometry: new ol.geom.Point(
        ol.proj.fromLonLat([10.7461, 59.9127])
        )  // Cordinates of Netsense Skien
    });
    function flytt() {
        featureMarker.getGeometry().translate(0, 100);
    };

    var vectorSource = new ol.source.Vector({
        features: [featureMarker]
    });

    var markerVectorLayer = new ol.layer.Vector({
        source: vectorSource,
    });

    map.addLayer(markerVectorLayer);

    //Set custom marker

    featureMarker.setStyle(new ol.style.Style({
        image: new ol.style.Icon(({
            scale: 0.5,
            opacity: 0.75,
            crossOrigin: 'anonymous',
            src: 'location.png'
        }))
    }));

  </script>
</body>
</html>

У меня тоже есть функция onclick. Который работал, но теперь карта не отображается.

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Вам следует изменить порядок кода.map использует layer и view (который использует center), поэтому они должны быть объявлены перед ним.

Также: layer должно быть layers. 

var center = ol.proj.fromLonLat([37.41, 8.82]);

var view = new ol.View({
  center: center,
  zoom: 6
});

var layer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  target: 'map',
  layers: [layer],
  view: view
});

Рабочая копия

0 голосов
/ 12 апреля 2019

layer: [layer] должно быть layers: [layer] Вы также должны определить layer, center и view, прежде чем использовать их 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
        .map {
          height: 400px;
          width: 100%;
        }

        #header {
            text-align: center;
        }
      </style>
  <title>Open Layers testing</title>
</head>
<body>
<h2>My Map</h2>
<header>
    <div id="header">
    <button id="flyttkanpp" onclick="flytt()">Flytt 300 meter</button>
    </div>
</header>
<div id="map" class="map"></div>
<script type="text/javascript">


    var baseMapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var layer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    var center = ol.proj.fromLonLat([37.41, 8.82]);
    var view = new ol.View({
      center: center,
      zoom: 6
    });
    var map = new ol.Map({
        target: 'map',
        view: view,
        layers: [layer]
    });
    var featureMarker = new ol.Feature({
        geometry: new ol.geom.Point(
        ol.proj.fromLonLat([10.7461, 59.9127])
        )  // Cordinates of Netsense Skien
    });
    function flytt() {
        featureMarker.getGeometry().translate(0, 100);
    };

    var vectorSource = new ol.source.Vector({
        features: [featureMarker]
    });

    var markerVectorLayer = new ol.layer.Vector({
        source: vectorSource,
    });

    map.addLayer(markerVectorLayer);

    //Set custom marker

    featureMarker.setStyle(new ol.style.Style({
        image: new ol.style.Icon(({
            scale: 0.5,
            opacity: 0.75,
            crossOrigin: 'anonymous',
            src: 'location.png'
        }))
    }));

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

Нет похожих вопросов

...