如何从geojson openlayers3获取图像源

Question

需要为json点传递不同的不同图像。如何从 json 中给出图像 src url

矢量图层和样式

vector = new ol.layer.Vector({
  source: new ol.source.Vector({
   projection : 'EPSG:4326',
   format: new ol.format.GeoJSON(),
   url: 'resources/multipoint.geojson'
 }),
  style: styleFunction1
});

var styleFunction1 = function(feature) {
              return styles[feature.getGeometry().getType()];
            };

var styles = {
              'Point': [
              new ol.style.Style({
               image: new ol.style.Icon({
                 src: 'resources/icon.png',
                 anchor: [0.5, 1]
               })
             })],
              'LineString': [new ol.style.Style({
                stroke: new ol.style.Stroke({
                  color: 'gray',
                  width: 5
                })
              })]
            };

json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
          "name": "Missing Person",
          "ref":" Ref 5684"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-0.12755, 51.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Wanted",
          "category": "cat1",
           "ref":" Ref 56124"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-0.12755, 52.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Missing 1",
           "ref":" Ref 1684"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-1.12755, 52.507222]
      }
    }    
  ]
}

如何从json传递src: 'resources/Blue_pointer.png',

Answer 1

将您的样式函数更改为：

var styleFunction1 = function(feature) {
  var styles = {
    'Point': [
      new ol.style.Style({
        image: new ol.style.Icon({
          src: feature.get('src'),
          anchor: [0.5, 1]
        })
      })],
    'LineString': [
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'gray',
          width: 5
        })
    })]
  };

  return styles[feature.getGeometry().getType()];
};

并将图像源添加到您的 JSON：

{
  "type": "Feature",
  "properties": {
      "name": "Missing Person",
      "ref":" Ref 5684",
      "src": "resources/some-img.png"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [-0.12755, 51.507222]
  }
},