I just began to work with openlayers, and I am in need to build a work just like yours. See my code below. From line 210 up the end the code is just like yours. I am reading a point feature (WGS-84) Json file and the coordinates are found like this:
{"type":"Feature","geometry":{"type":"Point","coordinates":[-49.3529413,-1.6501111]},"properties":{"NUMERO":"10569","MAREGRAFO":"COCALZINHO","CATALOGO":""}}
What changes should I make to display these features?
GeoJSON example
var image = new ol.style.Circle({ radius: 5, fill: null, stroke: new ol.style.Stroke({color: 'red', width: 1}) }); var styles = { 'Point': [new ol.style.Style({ image: image })], '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 }) })], 'MultiPoint': [new ol.style.Style({ image: image })], '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) { return styles[feature.getGeometry().getType()]; }; var geojsonObject = { 'type': 'FeatureCollection', 'crs': { 'type': 'name', 'properties': { 'name': 'EPSG:3857' } }, 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [0, 0] } }, { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [[4e6, -2e6], [8e6, 2e6]] } }, { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [[4e6, 2e6], [8e6, -2e6]] } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]] } }, { 'type': 'Feature', 'geometry': { 'type': 'MultiLineString', 'coordinates': [ [[-1e6, -7.5e5], [-1e6, 7.5e5]], [[1e6, -7.5e5], [1e6, 7.5e5]], [[-7.5e5, -1e6], [7.5e5, -1e6]], [[-7.5e5, 1e6], [7.5e5, 1e6]] ] } }, { 'type': 'Feature', 'geometry': { 'type': 'MultiPolygon', 'coordinates': [ [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]], [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]], [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]] ] } }, { 'type': 'Feature', 'geometry': { 'type': 'GeometryCollection', 'geometries': [ { 'type': 'LineString', 'coordinates': [[-5e6, -5e6], [0, -5e6]] }, { 'type': 'Point', 'coordinates': [4e6, -5e6] }, { 'type': 'Polygon', 'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]] } ] } } ] }; var vectorSource = new ol.source.Vector({ features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) }); vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6))); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: styleFunction }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ center: [0, 0], zoom: 2 }) }); var pointLayer = new OpenLayers.Layer.Vector("POI Markers", {projection: "EPSG:4326"}); $.getJSON('tide_gauges.json', function(data) { $.each(data.transmitters, function() { var pointFeatures = []; var px = this.longitude; var py = this.latitude; // Create a lonlat instance and transform it to the map projection. var lonlat = new OpenLayers.LonLat(px, py); lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat); var pointFeature = new OpenLayers.Feature.Vector(pointGeometry, null, { pointRadius: 16, fillOpacity: 0.7, externalGraphic: 'navio.png', }); pointFeatures.push(pointFeature); pointLayer.addFeatures(pointFeatures); }); }); var selectControl = new OpenLayers.Control.SelectFeature(pointLayer, { hover: true, onSelect: function(feature) { var layer = feature.layer; feature.style.fillOpacity = 1; feature.style.pointRadius = 20; layer.drawFeature(feature); var content = "Feature:" + feature.id + "
Location:" + feature.geometry +""; var popup = new OpenLayers.Popup.FramedCloud( feature.id + "_popup", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(250, 100), content, null, false, null); feature.popup = popup; map.addPopup(popup); }, onUnselect: function(feature) { var layer = feature.layer; feature.style.fillOpacity = 0.7; feature.style.pointRadius = 16; feature.renderIntent = null; layer.drawFeature(feature); map.removePopup(feature.popup); } }); map.addControl(selectControl); selectControl.activate();
أكثر...
{"type":"Feature","geometry":{"type":"Point","coordinates":[-49.3529413,-1.6501111]},"properties":{"NUMERO":"10569","MAREGRAFO":"COCALZINHO","CATALOGO":""}}
What changes should I make to display these features?
GeoJSON example
var image = new ol.style.Circle({ radius: 5, fill: null, stroke: new ol.style.Stroke({color: 'red', width: 1}) }); var styles = { 'Point': [new ol.style.Style({ image: image })], '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 }) })], 'MultiPoint': [new ol.style.Style({ image: image })], '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) { return styles[feature.getGeometry().getType()]; }; var geojsonObject = { 'type': 'FeatureCollection', 'crs': { 'type': 'name', 'properties': { 'name': 'EPSG:3857' } }, 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [0, 0] } }, { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [[4e6, -2e6], [8e6, 2e6]] } }, { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [[4e6, 2e6], [8e6, -2e6]] } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]] } }, { 'type': 'Feature', 'geometry': { 'type': 'MultiLineString', 'coordinates': [ [[-1e6, -7.5e5], [-1e6, 7.5e5]], [[1e6, -7.5e5], [1e6, 7.5e5]], [[-7.5e5, -1e6], [7.5e5, -1e6]], [[-7.5e5, 1e6], [7.5e5, 1e6]] ] } }, { 'type': 'Feature', 'geometry': { 'type': 'MultiPolygon', 'coordinates': [ [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]], [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]], [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]] ] } }, { 'type': 'Feature', 'geometry': { 'type': 'GeometryCollection', 'geometries': [ { 'type': 'LineString', 'coordinates': [[-5e6, -5e6], [0, -5e6]] }, { 'type': 'Point', 'coordinates': [4e6, -5e6] }, { 'type': 'Polygon', 'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]] } ] } } ] }; var vectorSource = new ol.source.Vector({ features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) }); vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6))); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: styleFunction }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ center: [0, 0], zoom: 2 }) }); var pointLayer = new OpenLayers.Layer.Vector("POI Markers", {projection: "EPSG:4326"}); $.getJSON('tide_gauges.json', function(data) { $.each(data.transmitters, function() { var pointFeatures = []; var px = this.longitude; var py = this.latitude; // Create a lonlat instance and transform it to the map projection. var lonlat = new OpenLayers.LonLat(px, py); lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat); var pointFeature = new OpenLayers.Feature.Vector(pointGeometry, null, { pointRadius: 16, fillOpacity: 0.7, externalGraphic: 'navio.png', }); pointFeatures.push(pointFeature); pointLayer.addFeatures(pointFeatures); }); }); var selectControl = new OpenLayers.Control.SelectFeature(pointLayer, { hover: true, onSelect: function(feature) { var layer = feature.layer; feature.style.fillOpacity = 1; feature.style.pointRadius = 20; layer.drawFeature(feature); var content = "Feature:" + feature.id + "
Location:" + feature.geometry +""; var popup = new OpenLayers.Popup.FramedCloud( feature.id + "_popup", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(250, 100), content, null, false, null); feature.popup = popup; map.addPopup(popup); }, onUnselect: function(feature) { var layer = feature.layer; feature.style.fillOpacity = 0.7; feature.style.pointRadius = 16; feature.renderIntent = null; layer.drawFeature(feature); map.removePopup(feature.popup); } }); map.addControl(selectControl); selectControl.activate();
أكثر...