如何从 json openlayer 3 获取矢量图层

Question

在下面的脚本中我添加了矢量图层vectorLayer,vectorLayer5,vectorLayer1

我如何从 json 中获取该层.. 想要从外部 json 文件中添加多个带有该图标 png 图像的层

// we change this on input change
var radius = 10;
  longitude = 400000;
  latitude = 300000;


var styleFunction = function() {
  return new ol.style.Style({
    image: new ol.style.Circle({
      radius: radius,
      stroke: new ol.style.Stroke({
        color: [51, 51, 51],
        width: 2
      }),
      fill: new ol.style.Fill({
        color: [51, 51, 51, .3]
      })
    })
  });
};

var update = function(value) {
var wgs84Sphere = new ol.Sphere(6378137);
  radius = value;
  vectorLayer.setStyle(styleFunction);
 if(wgs84Sphere.haversineDistance(feature.getGeometry().getCoordinates(),iconFeature5.getGeometry().getCoordinates())<=radius){
      vectorLayer5.setVisible(true);
      console.log('a');
  }
  else{
      vectorLayer5.setVisible(false);
      console.log('b');
  }
}

var feature = new ol.Feature(new ol.geom.Point([longitude, latitude]));
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [feature]
  }),
  style: styleFunction
});
 var rasterLayer = new ol.layer.Tile({
   source: new ol.source.TileJSON({
     url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
     crossOrigin: ''
   })
 });

// icon marker start here

var iconFeature5 = new ol.Feature({
  geometry: new ol.geom.Point([longitude, latitude]),
  name: 'Missing Person',
  population: 4000,
  rainfall: 500
});

var vectorSource5 = new ol.source.Vector({
  features: [iconFeature5]
});

var vectorLayer5 = new ol.layer.Vector({
  source: vectorSource5
});

var iconStyle5 = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    
    src: 'https://cloud.githubusercontent.com/assets/41094/2833021/7279fac0-cfcb-11e3-9789-24436486a8b1.png'
  }))
});
iconFeature5.setStyle(iconStyle5);

// 2nd marker

  longitude1 = 100000;
  latitude1 = 100000;
var iconFeature1 = new ol.Feature({
  geometry: new ol.geom.Point([longitude1, latitude1]),
  name: 'Missing Person',
  population: 4000,
  rainfall: 500
});

var vectorSource1 = new ol.source.Vector({
  features: [iconFeature1]
});

var vectorLayer1 = new ol.layer.Vector({
  source: vectorSource1
});

iconFeature1.setStyle(iconStyle5);



var map = new ol.Map({
  layers: [rasterLayer,vectorLayer,vectorLayer5,vectorLayer1],
  target: document.getElementById('map'),
  view: new ol.View({
    center: [400000, 400000],
    zoom: 4
  })
});

html, body, #map {
  height: 100%;
  overflow: hidden;
}
.input {
  margin: 5px 0;
}

<script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script>

<div class="input">
  <input type="range" id="range" min="10" max="50" onchange="update(this.value)">
  <input type="text" id="range" value="10">
</div>
<div id="map" class="map"></div>

Answer 1

在网络制图中，我们将带有几何图形的 json 数据称为 geojson，它在文本文件中有自己的扩展名。为了将 geojson 文件调用到 OL3，您必须将其加载到图层的矢量源，这是将外部 geojson 文件加载到 OL3 地图的代码的一部分：

var vectorSource=new ol.source.Vector({
      projection : 'EPSG:4326', // or 'EPSG:8357'
      url: 'yourExternalFile.geojson',
      format: new ol.format.GeoJSON()
});
var vectorLayer=new ol.layer.Vector({
    title: 'geojson layer',
    source: vectorSource,
    style:new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 0],
            anchorOrigin: 'bottom-left',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: 'yourImage.png'
        }))
    })
});

PS：Openlayers 3 网站上的示例结合起来非常有用