OpenLayers圖標未顯示

Question

我有一個基本的SpringBoot應用程序。 使用Spring Initializer，JPA，嵌入式Tomcat，Thymeleaf模板引擎並將其打包為可執行JAR文件。 我有一個Thymeleaf，可以顯示帶有帶有Icon的OpenLayers 4庫的地圖，但是Icon不會顯示在地圖上的任何位置

<div id="Map" class="map"></div>
<div id="popup"></div>
<div></div>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script th:inline="javascript">
  /*<![CDATA[*/

  var lat = /*[[${lat}]]*/ ;
  var lng = /*[[${lng}]]*/ ;

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point([lng, lat]),
    name: 'The icon',
    population: 4000,
    rainfall: 500
  });

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
    }))
  });

  iconFeature.setStyle(iconStyle);

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

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

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.TileJSON({
      url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
      crossOrigin: ''
    })
  });

  var map = new ol.Map({
    layers: [rasterLayer, vectorLayer,
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'Map',
    controls: ol.control.defaults({
      attributionOptions: {
        collapsible: false
      }
    }),
    view: new ol.View({
      center: ol.proj.fromLonLat([lng, lat]),
      zoom: 14
    })
  });
  /*]]>*/

</script>
</div>

Answer 1

您有幾個問題：

1. 您尚未將坐標投影到正確的投影：

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857')),
  name: 'The icon',
  population: 4000,
  rainfall: 500
});

2. 一旦執行此操作，圖標就會短暫出現，然后消失，除非我對此進行更改：

var map = new ol.Map({
  layers: [rasterLayer, vectorLayer],
  target: 'Map',
  controls: ol.control.defaults({
    attributionOptions: {
      collapsible: false
    }
  }),
  view: new ol.View({
    center: ol.proj.fromLonLat([lng, lat]),
    zoom: 5
  })
});

概念證明

如果您不希望使用'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'磁貼，請更改：

var rasterLayer = new ol.layer.Tile({
  source: new ol.source.TileJSON({
    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
    crossOrigin: ''
  })
});

至：

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

概念證明

代碼段：

 var lat = 42; var lng = -75; var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857')), name: 'The icon', population: 4000, rainfall: 500 }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png' })) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var rasterLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ layers: [rasterLayer, vectorLayer], target: 'Map', controls: ol.control.defaults({ attributionOptions: { collapsible: false } }), view: new ol.View({ center: ol.proj.fromLonLat([lng, lat]), zoom: 5 }) }); 

 html, body, .map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <div id="Map" class="map"></div> <div id="popup"></div> <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>