Question

尝试起床并使用相当简单的地图。我正在使用openlayers-angular-directive，这个相同的http请求和图层设置正在工作（geojson功能在stamen图层上方的图层上显示为红色矢量）。现在，我决定要一个“vanilla”openlayers设置（见下文），我只能让stamen层显示出来。我能错过什么？

<!DOCTYPE html><html><head><meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.1/ol-debug.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.14.0/axios.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.1/ol-debug.js"></script>
  </head>
  <body>
    <div id="olMap"></div>
    <script>
      let olMap = document.getElementById('olMap');

      let parcelVectorSource = new ol.source.Vector();

      let map = new ol.Map({
        target: olMap,
        layers: [
          new ol.layer.Tile({
            source: new ol.source.Stamen({
              layer: 'toner'
            })
          }),
          new ol.layer.Vector({
            source: parcelVectorSource,
            style: new ol.style.Style({
              fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.6)',
              }),
              stroke: new ol.style.Stroke({
                color: 'white',
                width: 3,
              }),
            }),
          }),
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([-111.6597963, 40.2119769]),
          zoom: 16,
        })
      });

      axios.get('http://localhost:8000/api/projects/2/parcels/')
        .then(result => updateMap(result.data));

      function updateMap (geojsonObj) {
        let geojsonFormat = new ol.format.GeoJSON();
        let features = geojsonFormat.readFeatures(geojsonObj);
        parcelVectorSource.addFeatures(features);
      }
    </script>
  </body></html>

当我可以使用openlayers-angular-directive时，为什么我不能显示功能？

0 个答案: