时间戳

首页 > 解决方案 > OpenLayers 图标不显示

javascript - OpenLayers 图标不显示

问题描述

我有一个基本的 SpringBoot 应用程序。使用 Spring Initializer、JPA、嵌入式 Tomcat、Thymeleaf 模板引擎，并将其打包为可执行的 JAR 文件。我有一个 Thymeleaf，它显示带有 OpenLayers 4 库和图标的地图，但图标没有显示在地图中的任何位置

<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>

标签： javascripthtmlthymeleafopenlayersopenstreetmap

解决方案

你有几个问题：

  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
});
  1. 一旦我这样做，图标会短暂出现然后消失，除非我改变它：
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>

推荐阅读