如何將許多帶有自定義文本的標記添加到 openlayers 5

Question

我正在使用 openlayers v5.3.0，並且實際上加載了一個帶有許多標記的地圖（在代碼片段中是一個小的子集，在我的代碼中有數千個）。

我想要做的是自定義這些標記，用不同的顏色和文字來設計它們。

如何自定義添加到地圖的每個標記的文本和顏色？

 var baseMapLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ target: 'map-canvas', layers: [baseMapLayer], view: new ol.View() }); var markers = []; markers.push(new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([12.483713800000032, 41.901777]) ), name: '492,00' })); markers.push(new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([12.5048055, 41.8968191]) ), name: '289,50' })); markers.push(new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([12.48060190000001, 41.9077133]) ), name: '1606,50' })); markers.push(new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([12.498839999999973, 41.9000227]) ), name: '324,00' })); var vectorSource = new ol.source.Vector({ features: markers }); var markerVectorLayer = new ol.layer.Vector({ source: vectorSource, }); map.addLayer(markerVectorLayer); map.getView().fit(vectorSource.getExtent(), map.getSize());

 <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" /> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <div id="map-canvas" style="width: 400px; height: 400px"></div>

Answer 1

您需要為要使用的每種顏色和文本樣式創建標記樣式，然后使用樣式功能選擇適合每個功能的內容

 var baseMapLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ target: 'map-canvas', layers: [baseMapLayer], view: new ol.View() }); var markers = []; markers.push(new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([12.483713800000032, 41.901777]) ), name: '492,00' })); markers.push(new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([12.5048055, 41.8968191]) ), name: '289,50' })); markers.push(new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([12.48060190000001, 41.9077133]) ), name: '1606,50' })); markers.push(new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([12.498839999999973, 41.9000227]) ), name: '324,00' })); var colors = ['red', 'green', 'blue', 'black']; var iconStyles = []; colors.forEach(function(color) { iconStyles.push(new ol.style.Style({ image: new ol.style.Circle({ radius: 6, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: color }) }) })) }); var labelStyle = new ol.style.Style({ text: new ol.style.Text({ font: '12px Calibri,sans-serif', overflow: true, fill: new ol.style.Fill({ color: '#000' }), stroke: new ol.style.Stroke({ color: '#fff', width: 3 }), textBaseline: 'bottom', offsetY: -8 }) }); var vectorSource = new ol.source.Vector({ features: markers }); var markerVectorLayer = new ol.layer.Vector({ source: vectorSource, style: function(feature) { var name = feature.get('name'); var iconStyle = iconStyles[parseInt(name)%colors.length]; labelStyle.getText().setText(name); return [iconStyle, labelStyle]; } }); map.addLayer(markerVectorLayer); map.getView().fit(vectorSource.getExtent(), map.getSize());

 <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" /> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <div id="map-canvas" style="width: 400px; height: 400px"></div>