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