如何在中心繪制帶有圖像或文本的圖標？

Question

我試圖在 OpenLayers 中繪制圖標：

style: (feature: FeatureLike) => {
            return new Style({
              image: new Icon({
                color: "red",
                scale: 0.5,
                crossOrigin: "anonymous",
                src: `./assets/images/${icon}.png`,
              }),
              text: new Text({
                text: "1",
                fill: new Fill({
                  color: "#fff",
                }),
              }),
            });
          },

我想使用相同的空白圖標，但只更改內部的圖像和顏色圖標。

如何在 OpenLayers 中正確地做到這一點？

Answer 1

從相關問題Add a Text 旁邊的點 Open Layer創建一個選項，修改為添加可自定義的 colors。

http://www.geocodezip.com/OL_6.14.1_multipleLabelledMarkersOption2colored.html

解析一個字符串，如： ['-117.3523286', '33.2171511', '#FF0000', 'KOKB'] ，即：每個標記的[lng, lat, color, text] 。

// modified from https://stackoverflow.com/questions/54907386/add-a-text-next-to-the-point-open-layer
var iconFeatures=[];
coords.forEach((elem, ind, arr) => {
  coord = elem.split(',')
  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([parseFloat(coord[0]), parseFloat(coord[1])], 'EPSG:4326',     
      'EPSG:3857')),
      name: coord[3],
      color: coord[2]
  });
  iconFeatures.push(iconFeature);
});

var vectorSource = new ol.source.Vector({
  features: iconFeatures 
});

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
        })
    })
});

vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: function(feature) {
      labelStyle.getText().setText(feature.get('name'));
      iconStyle = new ol.style.Style({
        image:  new ol.style.Circle({
          radius: 20,
          stroke: new ol.style.Stroke({
            color: '#fff'
          }),
          fill: new ol.style.Fill({
            color: feature.get('color')
          })
        })
  });
      return [new ol.style.Style({
        image:  new ol.style.Circle({
          radius: 20,
          stroke: new ol.style.Stroke({
            color: '#fff'
          }),
          fill: new ol.style.Fill({
            color: feature.get('color')
          })
        })
  }), labelStyle];
    }
});
map.addLayer(vectorLayer);

代碼片段：

 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), ], view: new ol.View({ center: ol.proj.fromLonLat([-117.1610838, 32.715738]), zoom: 10 }), }); // data for markers var customMarker = [ {lng:-117.1933038, lat: 32.7338006, icaocode: "KSAN", name: "San Diego International Airport", height: "5", callsign: "KSAN", color: "#FF0000"}, {lng:-117.1414123, lat: 32.8127254, icaocode: "KMYF", name: "Montgomery Field", height: "130.1", callsign: "KMYF", color: "#00FF00"}, {lng:-117.2792408, lat: 33.1268216, icaocode: "KCRQ", name: "McClellan-Palomar Airport", height: "101", callsign: "KCRQ", color: "#0000FF"}, {lng:-116.9810485, lat: 32.5705504, icaocode: "KSDM", name: "Brown Field", height: "160", callsign: "KSDM", color: "#FFFF00"}, {lng:-116.9725114, lat: 32.8267321, icaocode: "KSEE", name: "Gillespie Field", height: "118", callsign: "KSEE", color: "#00FFFF"}, {lng:-116.9115525, lat: 33.0409315, icaocode: "KRNM", name: "Ramona Airport", height: "425", callsign: "KRNM", color: "#FF00FF"}, {lng:-117.3523286, lat: 33.2171511, icaocode: "KOKB", name: "Oceanside Municipal Airport", height: "8.5", callsign: "KOKB", color: "#FF0000"}, ]; var coords = []; for (var i = 0; i < customMarker.length; i++) { coords.push(customMarker[i].lng + "," + customMarker[i].lat + "," + customMarker[i].color + "," + customMarker[i].icaocode); console.log("i=" + i + ":" + coords[i]) } // from https://stackoverflow.com/questions/54907386/add-a-text-next-to-the-point-open-layer var iconFeatures = []; coords.forEach((elem, ind, arr) => { coord = elem.split(',') console.log(coord); var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([parseFloat(coord[0]), parseFloat(coord[1])], 'EPSG:4326', 'EPSG:3857')), name: coord[3], color: coord[2] }); iconFeatures.push(iconFeature); }); var vectorSource = new ol.source.Vector({ features: iconFeatures }); 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 }) }) }); vectorLayer = new ol.layer.Vector({ source: vectorSource, style: function(feature) { console.log("feature.name=" + feature.get('name') + " color=" + feature.get('color')); labelStyle.getText().setText(feature.get('name')); iconStyle = new ol.style.Style({ image: new ol.style.Circle({ radius: 20, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: feature.get('color') }) }) }); return [new ol.style.Style({ image: new ol.style.Circle({ radius: 20, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: feature.get('color') }) }) }), labelStyle]; } }); map.addLayer(vectorLayer);

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

 <:doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https.//openlayers.org/en/v6.14.1/css/ol:css" type="text/css"> <script src="https.//openlayers.org/en/v6.14.1/build/ol js" type="text/javascript"></script> <title>OpenLayers example</title> </head> <body> <div id="map" class="map"></div> </body> </html>