lundi 23 février 2015

How can I add markers and attributes contained in JSON data to an OpenLayers 3 vector layer?


My question is similar to a previous question I asked (How can I add attributes contained in JSON data to an OpenLayers popup?). However, since I originally asked this question, I have upgraded to OpenLayers 3 (OL3) and am having some difficulties.


I am currently displaying an OL3 map using the following snippet code:



var sourceBingMaps = new ol.source.BingMaps({
key: '<My API Key>',
imagerySet: 'Road',
culture: 'en-us'
});
// Microsoft Bing tile source for roads
var bingMapsRoad = new ol.layer.Tile({
preload: Infinity,
source: sourceBingMaps
});
var bingMapsAerial = new ol.layer.Tile({
preload: Infinity,
source: new ol.source.BingMaps({
key: '<My API Key>',
imagerySet: 'AerialWithLabels',
})
});

var map = new ol.Map({
renderer: 'canvas',
layers: [bingMapsRoad,bingMapsAerial],
controls: [],
target: 'map',
view: new ol.View({
center: ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857'),
zoom: 3,
minZoom: 3,
maxZoom: 19
})
});


The code displays the BING layer without issue. I have a JSON file, with a sample of the data below:



"LOCATION_A": {
"latitude": 10.2070,
"longitude": 25.3215,
"altitude": 1.2,
"status": "CLOSED",
"serverAddress": "192.168.0.1"
}


I am using the code below with jQuery to cycle through the JSON file and place the markers on the BING map layer.



$.getJSON('json/XMIT.json', function(data) {
$.each(data.markers, function(key, val) {
var pointFeatures = [];
var markerName = this.name;
var markerLocation = this.location;
var markerLatitude = this.latitude;
var markerLongitude = this.longitude;
var markerAltitude = this.altitude;
var markerStatus = this.commsState;
var pointGeometry = new ol.geom.Point(ol.proj.transform([markerLongitude, markerLatitude], 'EPSG:4326', 'EPSG:3857'));
var pointAttributes = {'location': markerLocation, 'latitude': markerLatitude,
'longitude': markerLongitude, 'altitude': markerAltitude,
};


var pointFeature = new ol.Feature(pointGeometry, pointAttributes, {
title: markerLocation,
pointRadius: 16,
});

var vectorSource = new.ol.source.Vector({
projection: 'EPSG:4326'
});
vectorSource.addFeatures([pointFeature]);

var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
});
});


When this code is executed, the browser console provides the following error:



expected expression, got '.'


In regards to this variable:



var vectorSource = new.ol.source.Vector({
projection: 'EPSG:4326'
});


Any help with how to accomplish this task is appreciated. Thank you in advance.





Aucun commentaire:

Enregistrer un commentaire