OpenLayers 在 map 上顯示圖標的問題

Question

我遇到了 OpenLayers 6.5.0 的問題。 我想在 map 上顯示一個圖標，但盡管多次嘗試我都失敗了。 我認為這不是坐標的問題。 我嘗試了 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>

Answer 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'
        })
    })