为每组坐标绘制不同样式的 openLayers 图层答案

【问题标题】：Draw an openLayers layer with different style for each set of coordinates为每组坐标绘制不同样式的 openLayers 图层
【发布时间】：2016-07-14 20:15:21
【问题描述】：

我有一个从服务器上得到的刺痛，我需要遍历它。这个字符串实际上是我想使用 openLayers 在地图中可视化的位置的 geojson。以下是返回字符串的示例：

{crs:
    {"type":"name",
     "properties":{
            "name":"ESPG:4326"
      },
     },
     "features":[{"properties":{
                 "image":"IMAGE1"},
                 "type":"Feature",
                 "geometry":{
                           "type":"Point",
                           "coordinates":[0,0]
                  }},{"properties":{
                 "image":"IMAGE2"},
                 "type":"Feature",
                 "geometry":{
                           "type":"Point",
                           "coordinates":[10,10]
                  }},{"properties":{
                 "image":"IMAGE3"},
                 "type":"Feature",
                 "geometry":{
                           "type":"Point",
                           "coordinates":[75,99]
                  }}]
        ,type:"FeatureCollection"
}

如您所见，features 中的每个 feature 都有一些 properties 和一个 geometry。我想创建一个新的layer (ol.layer.Vector)，它会为特征的每个元素绘制一个带有相应坐标和图像的点。使用以下代码，我设法使用预定义的图像绘制地图中的所有点。我想我应该遍历这个字符串并获取坐标和图像，并以某种方式创建一个图层（或多个图层？），并将这些值作为源和相应的样式。有什么想法吗？？谢谢！

//map is the actual map where the images load
//responseText is the String that I get from the server
//predefinedImage is actually a predefined image that I use as icon for the points.
//If I complitelly remove the "style" from geojson_layer it sets the image to a default value.
var geoJSONsource = new ol.source.Vector({
     features: (new ol.format.GeoJSON()).readFeatures(responseText)
});

geojson_layer = new ol.layer.Vector({
     source: geoJSONsource,
     style: predefinedImage
});

map.addLayer(geojson_layer);

【问题讨论】：

你怎么知道要使用哪张图片？
名称IMAGE1 等表示附加到服务链接（java servlet）的某个值。因此，例如，在我以某种方式获得 IMAGE1 的值后，我将在 javascript 中有一个字符串，如下所示：var imageSource = 'http://localhost:8080/project/getImage?' + IMAGE1;

标签： javascript string openlayers-3 geojson

【解决方案1】：

这可能会对您有所帮助：

https://gis.stackexchange.com/a/95389/77349

不过，您应该修改这一行：

externalGraphic: 'marker.png',

类似

externalGraphic: this.image,

希望这会有所帮助！

【讨论】：