如何从geojson openlayers3获取图像源

Question

需要为json点传递不同的不同图像。如何从json

提供图像src url

矢量图层和样式

.method--description{
  display: none;
}

.payment--method.active .method--description{
  display: block;
}

Json

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="payment--method">

  <div class="method--input">
    <input type="radio" name="payment" value="1" id="payment_option1" checked="checked">
  </div>

  <div class="method--label">
    <label for="payment_option1">Option 1</label>
  </div>

  <div class="method--description">
    Option 1 description
  </div>

</div>

<div class="payment--method">

  <div class="method--input">
    <input type="radio" name="payment" value="2" id="payment_option2">
  </div>

  <div class="method--label">
    <label for="payment_option2">Option 2</label>
  </div>

  <div class="method--description">
    Option 2 description
  </div>

</div>

如何从json传递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 }) })] };

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]
  }
},