javascript - 为每组坐标绘制不同样式的 openLayers 图层

标签 javascript string openlayers-3 geojson

我有一个来自服务器的刺痛,我需要循环遍历它。该字符串实际上是我想使用 openLayers 在 map 中可视化的位置的 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 都有一些属性 和一个几何。我想创建一个新的图层(ol.layer.Vector),对于特征的每个元素将绘制一个具有相应坐标和图像的点。使用以下代码,我设法使用预定义的图像绘制 map 中的所有点。我想我应该循环遍历这个字符串并获取坐标和图像,并以某种方式创建一个图层(或多个图层?),并将这些值作为源和相应的样式。有什么想法吗?谢谢!

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

最佳答案

这可能对您有帮助:

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

不过,您应该修改此行:

externalGraphic: 'marker.png',  

类似

externalGraphic: this.image,  

希望这有帮助!

关于javascript - 为每组坐标绘制不同样式的 openLayers 图层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38326062/

相关文章:

Javascript 变量到 PHP 变量,无需重新加载页面

javascript - 从 WebSocket React 获取数据

javascript - 如何使用 jQuery/JavaScript 将每个字符添加到表单字段中

c - 如何使用 fscanf 或 fgets 在结构中动态分配字符串?

openlayers-3 - 如何缓存 QGIS Server WMS?

javascript - 通过 angularjs 动态下拉菜单

java - 从Java中的文本中提取日期

c++如何用数组中的字符串替换另一个字符串

openlayers-3 - Openlayers 3偏移正则形状

javascript - OpenLayers3 在圆上添加文字