OpenMapLayers 不在 MVC 项目中渲染地图

Question

我正在尝试开始基于 OpenMapLayers 的项目工作，我所做的是在该网站上将基本示例复制粘贴到 html 文件中，然后运行它，一切都按预期工作，比我基本上尝试在新的 MVC 项目上做同样的事情但没有渲染。知道为什么会这样吗？

@{
    ViewBag.Title = "Home Page";
}
<h2>Getting started</h2>
<div id="mapdiv"></div>
@section scripts{
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
            map = new OpenLayers.Map("mapdiv");
            map.addLayer(new OpenLayers.Layer.OSM());

            var lonLat = new OpenLayers.LonLat(-0.1279688, 51.5077286)
                .transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    map.getProjectionObject() // to Spherical Mercator Projection
                );

            var zoom = 16;

            var markers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markers);

            markers.addMarker(new OpenLayers.Marker(lonLat));

            map.setCenter(lonLat, zoom);

    </script>
}

Answer 1

这里我为你做了一个例子，如果这就是你要找的，请告诉我。

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.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.3.1/build/ol.js"></script>
    <title>GeoJSON to Points</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      const geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857'
          }
        },
        'features': [
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': ol.proj.fromLonLat([37.41, 8.82])
            }
          },
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': ol.proj.fromLonLat([38.41, 9.82])
            }
          },
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': ol.proj.fromLonLat([37.41, 9.82])
            }
          }
        ]
      };

      const style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 5,
          fill: null,
          stroke: new ol.style.Stroke({color: 'red', width: 2})
        })
      });

      const vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
      });

      const vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style
      });

      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([37.41, 8.82]),
          zoom: 8
        })
      });
    </script>
  </body>
</html>

更新

如果您的 JSON 格式是您在问题评论中描述的格式，那么这应该有效，

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.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.3.1/build/ol.js"></script>
    <title>JSON to Points</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      const jsonObject = {
        "coords": [
          { "latitude": "8.417334", "longitude": "45.322557" },
          { "latitude": "8.411594", "longitude": "45.324352"}
        ]
      };

      const features = [];

      for(const coord of jsonObject.coords) {
        features.push(new ol.Feature({
          geometry: new ol.geom.Point(
            ol.proj.fromLonLat([coord.longitude, coord.latitude]),
            'XY'
          )
        }));
      }

      const style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 5,
          fill: null,
          stroke: new ol.style.Stroke({color: 'red', width: 2})
        })
      });

      const vectorSource = new ol.source.Vector({
        features
      });

      const vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style
      });

      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([45.32, 8.41]),
          zoom: 14
        })
      });
    </script>
  </body>
</html>

OpenMapLayers 不在 MVC 项目中渲染地图

OpenMapLayers not rendering map in a MVC project

html

javascript

asp.net-mvc

openlayers