2016-08-10 7 views
1

Необходимо передать разные изображения для точки json. Как дать изображения Src URL из JSONКак получить источник изображения от geojson openlayers3

векторный слой и стиль

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

Как пройти src: 'resources/Blue_pointer.png', из JSON

ответ

0

Изменение функции стиля для:

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

получения ошибок - не может прочитать свойство «0» в нуле ol.js // ол Версия: v3.16.0 – Sagar

+0

В styleFunction1 Если я получаю имена .. консоль .log (feature.get ('имя')); Но не получить src console.log (feature.get ('src')); – Sagar

+0

Работает сейчас. Он принимает только 2 свойства .. «Свойства»: { «имя»: «Требуется», «src»: «resources/icon.png» }, – Sagar

Смежные вопросы