OpenLayers 在地图上显示图标的问题答案

【问题标题】：OpenLayers problem with displaying icons on mapOpenLayers 在地图上显示图标的问题
【发布时间】：2021-01-25 19:24:54
【问题描述】：

我遇到了 OpenLayers 6.5.0 的问题。我想在地图上显示一个图标，但尽管多次尝试我都失败了。我认为这不是坐标的问题。我尝试了 EPSG 转换。我查看了文档和其他可用示例，但不知道可能导致此问题的原因。

var locations = [
  [15.94606, 51.57557],
  [15.94602, 51.57572],
  [15.94604, 51.57576],
  [15.946, 51.57581],
  [15.94588, 51.57586],
  [15.94567, 51.57591],
  [15.94543, 51.57597],
  [15.94527, 51.57602],
  [15.94513, 51.57605],
  [15.94502, 51.57607],
  [15.94497, 51.57609],
  [15.94499, 51.57609],
  [15.94497, 51.57611],
  [15.94501, 51.57616],
  [15.94525, 51.57636]
 
];

var lineString = new ol.geom.LineString(locations).transform('EPSG:4326', 'EPSG:3857')

    var startMarker = new ol.Feature({
        type: 'icon',
        geometry: new ol.geom.Point(ol.proj.transform([15.94606, 51.57557], 'EPSG:4326','EPSG:3857'))
    });
    var endMarker = new ol.Feature({
        type: 'icon',
        geometry: new ol.geom.Point(lineString.getCoordinateAt(1))
    });


    var lineLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                    geometry: lineString,
                    name: 'Line'
                }),
                startMarker,
                endMarker
            ]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                opacity: 0.5,
                width: 5
            }),
            'icon': new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 1],
                    src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
                })
            })
        })
    });

var view = new ol.View({
  center: ol.proj.fromLonLat([15.94616, 51.57555]),
  zoom: 13
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    lineLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  view: view
});

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

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js "></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
<div id="map" class="map"></div>

【问题讨论】：

标签： javascript gps openlayers-6

【解决方案1】：

样式不需要图标属性，只需包含带有笔触样式的图像

    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            opacity: 0.5,
            width: 5
        }),
        image: new ol.style.Icon({
            anchor: [0.5, 1],
            src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
        })
    })

【讨论】：