Question

我有一个带有osm的openlayers的地图。我看不到地图。它曾经工作过，但突然间不起作用。当我使用最简单的设置仅显示地图时，它就会起作用。

我尝试了一些不同的操作，例如解构并查看代码。我将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函数。威奇（Wich）一直在工作，但是现在地图没有显示。

Answer 1

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>

Answer 2

您应该重新排列代码。 map使用layer和view（使用center），因此需要在它们之前声明它们。

也：layer needs to be 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
});

Working copy

地图未显示

2 个答案: