I have a GeoJSON file with a feature as follows:
{ "type": "Feature", "properties": { "Start Date": "01-09-2015", "End Date": "01-09-2015" }, "geometry": { "type": "GeometryCollection", "geometries": [ { "type": "Point", "name": "test", "coordinates": [74.86083984375, -52.94201777829492] }, { "type": "LineString", "coordinates": [[74.86083984375, -52.94201777829492], [75.5419921875, -53.10721669189339]] }, { "type": "Point", "coordinates": [75.5419921875, -53.10721669189339] } ] }},As you can see it consists of 2 points with a line joining the two points.
I want to style the 2 points with different colors but am stumped as to how to do that. At the moment I have the following ....
var styleEnd = [ new ol.style.Style({ image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#FF4500', opacity: 0.8 }) }) }) ]; var styles = { 'Point': [new ol.style.Style({ image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: 'black' }) }) })], 'LineString': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'green', width: 1 }) })], 'MultiLineString': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'green', width: 1 }) })], 'MultiPolygon': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'yellow', width: 1 }), fill: new ol.style.Fill({ color: 'rgba(255, 255, 0, 0.1)' }) })], 'Polygon': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', lineDash: [4], width: 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) })], 'GeometryCollection': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'magenta', width: 2 }), fill: new ol.style.Fill({ color: 'magenta' }), image: new ol.style.Circle({ radius: 10, fill: null, stroke: new ol.style.Stroke({ color: 'magenta' }) }) })], 'Circle': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.2)' }) })] }; var styleFunction = function (feature, resolution) { if (feature.getGeometryName() === 'test') { return styleEnd; } else { return styles[feature.getGeometry().getType()]; } }; var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'map.geojson', format: new ol.format.GeoJSON() }), style: styleFunction });Bit of a mess...any help will be appreciated.
أكثر...
{ "type": "Feature", "properties": { "Start Date": "01-09-2015", "End Date": "01-09-2015" }, "geometry": { "type": "GeometryCollection", "geometries": [ { "type": "Point", "name": "test", "coordinates": [74.86083984375, -52.94201777829492] }, { "type": "LineString", "coordinates": [[74.86083984375, -52.94201777829492], [75.5419921875, -53.10721669189339]] }, { "type": "Point", "coordinates": [75.5419921875, -53.10721669189339] } ] }},As you can see it consists of 2 points with a line joining the two points.
I want to style the 2 points with different colors but am stumped as to how to do that. At the moment I have the following ....
var styleEnd = [ new ol.style.Style({ image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#FF4500', opacity: 0.8 }) }) }) ]; var styles = { 'Point': [new ol.style.Style({ image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: 'black' }) }) })], 'LineString': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'green', width: 1 }) })], 'MultiLineString': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'green', width: 1 }) })], 'MultiPolygon': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'yellow', width: 1 }), fill: new ol.style.Fill({ color: 'rgba(255, 255, 0, 0.1)' }) })], 'Polygon': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', lineDash: [4], width: 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) })], 'GeometryCollection': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'magenta', width: 2 }), fill: new ol.style.Fill({ color: 'magenta' }), image: new ol.style.Circle({ radius: 10, fill: null, stroke: new ol.style.Stroke({ color: 'magenta' }) }) })], 'Circle': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.2)' }) })] }; var styleFunction = function (feature, resolution) { if (feature.getGeometryName() === 'test') { return styleEnd; } else { return styles[feature.getGeometry().getType()]; } }; var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'map.geojson', format: new ol.format.GeoJSON() }), style: styleFunction });Bit of a mess...any help will be appreciated.
أكثر...