addPoint: function(point, options) {
var pointObject = convertPointCoordinate(point);
var feature = new Openlayers.Feature({
geometry: new Openlayers.geom.Point(pointObject)
});
feature.setId(options.id);
feature.setStyle(new Openlayers.style.Style({
image: new Openlayers.style.Icon({
src: getSVGImage(options.color)
})
}));
var vectorSource = new Openlayers.source.Vector({
features: [feature]
});
var vectorLayer = new Openlayers.layer.Vector({
source: vectorSource,
zIndex: 1
});
map.addLayer(vectorLayer);
return vectorLayer;
},
addPointWithText: function(point, options) {
var pointObject = convertPointCoordinate(point);
var feature = new Openlayers.Feature({
geometry: new Openlayers.geom.Point(pointObject)
});
feature.setId(options.id);
feature.setStyle(new Openlayers.style.Style({
image: new Openlayers.style.Icon({
img: DrawingUtility.getCircleWithText({
fillColor: options.color,
text: options.id.length,
}),
imgSize: [44, 44]
})
}));
var vectorSource = new Openlayers.source.Vector({
features: [feature]
});
var vectorLayer = new Openlayers.layer.Vector({
source: vectorSource,
zIndex: 1
});
map.addLayer(vectorLayer);
return vectorLayer;
},
showMultiPolygonShape: function(locationModel) {
let lineObject = locationModel
.get('multipolygon')
.map(poly =>
poly.map(coordinateSet =>
coordinateSet.map(pair => convertPointCoordinate(pair))
)
)
let feature = new Openlayers.Feature({
geometry: new Openlayers.geom.MultiPolygon(lineObject),
})
feature.setId(locationModel.cid)
const styles = [
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: locationModel.get('color') || defaultColor,
width: 4,
}),
}),
]
feature.setStyle(styles)
return this.createVectorLayer(locationModel, feature)
},
get olFeature() {
const feature = new ol.Feature({
geometry: this.labelCoordinate.olPoint,
})
feature.setStyle(new ol.style.Style({
text: new ol.style.Text({
textAlign: "center",
textBaseline: "middle",
font: 'bold 1em sans-serif',
text: this.name,
fill: new ol.style.Fill({color: "#ffffff"}),
stroke: new ol.style.Stroke({color: "#000000", width: 2}),
}),
}))
return feature
}
addPoint: function(point, options) {
const pointObject = convertPointCoordinate(point)
const feature = new Openlayers.Feature({
geometry: new Openlayers.geom.Point(pointObject),
name: options.title,
})
feature.setId(options.id)
let x = 39,
y = 40
if (options.size) {
x = options.size.x
y = options.size.y
}
feature.setStyle(
new Openlayers.style.Style({
image: new Openlayers.style.Icon({
img: DrawingUtility.getPin({
fillColor: options.color,
icon: options.icon,
}),
imgSize: [x, y],
anchor: [x / 2, 0],
anchorOrigin: 'bottom-left',
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
}),
})
)
const vectorSource = new Openlayers.source.Vector({
features: [feature],
})
const vectorLayer = new Openlayers.layer.Vector({
source: vectorSource,
zIndex: 1,
})
map.addLayer(vectorLayer)
return vectorLayer
},
addLine: function(line, options) {
var lineObject = line.map(function(coordinate) {
return convertPointCoordinate(coordinate);
});
var feature = new Openlayers.Feature({
geometry: new Openlayers.geom.LineString(lineObject),
name: options.title
});
feature.setId(options.id);
var styles = [
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: 'white',
width: 8
})
}),
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: options.color || defaultColor,
width: 4
})
})
];
feature.setStyle(styles);
var vectorSource = new Openlayers.source.Vector({
features: [feature]
});
var vectorLayer = new Openlayers.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
return vectorLayer;
},
addLine: function(line, options) {
const lineObject = line.map(function(coordinate) {
return convertPointCoordinate(coordinate)
})
const feature = new Openlayers.Feature({
geometry: new Openlayers.geom.LineString(lineObject),
name: options.title,
})
feature.setId(options.id)
const styles = [
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: 'white',
width: 8,
}),
}),
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: options.color || defaultColor,
width: 4,
}),
}),
]
feature.setStyle(styles)
const vectorSource = new Openlayers.source.Vector({
features: [feature],
})
const vectorLayer = new Openlayers.layer.Vector({
source: vectorSource,
})
map.addLayer(vectorLayer)
return vectorLayer
},
var onSelectAddress = function(lat, lng){
if (window.console) console.log("TheApp.onSelectAddress()", "latitude", lat, "longitude", lng);
map.addInteraction(select_);
//map.addInteraction(modify_);
var coord = ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857');
if (window.console) console.log("TheApp.onSelectAddress()", "coordinate", coord);
var thePoint = new ol.geom.Point(coord);
var feature = new ol.Feature();
feature.setId('feature'+featureid++);
feature.setGeometryName(config.geoavalanche.geometryName);
feature.setGeometry(thePoint);
if (window.console) {
console.log(formatWKT.writeFeature(feature));
console.log(formatWKT.writeGeometry(feature.getGeometry()));
console.log(formatGeoJSON.writeFeature(feature));
console.log(formatGeoJSON.writeGeometry(feature.getGeometry()));
}
var theFeature = JSON.parse(formatGeoJSON.writeFeature(feature));
if (theFeature.properties === null) {
delete theFeature.properties;
}
var theColl = {type: "FeatureCollection", features: [theFeature]};
if (window.console) console.log(JSON.stringify(theColl));
var datawps_ = datawps.replace("XXXX", JSON.stringify(theColl));
if (window.console) console.log('POST', config.geoavalanche.urlwps);
document.getElementById('map').style.cursor = 'wait';
$.ajax({
type: "POST",
url: config.geoavalanche.urlwps,
data: datawps_,
contentType: 'text/xml',
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Basic ' + btoa('admin:geoserver'));
},
success: function(data) {
document.getElementById('map').style.cursor = 'default';
if (window.console) console.log('success()');
var newfeatures = formatWFS.readFeatures(data, {dataProjection:'EPSG:4326', featureProjection:'EPSG:3857'});
if (window.console) console.log(newfeatures);
vectorSource.addFeatures(newfeatures);
//saveFeatures(newfeatures);
map.getView().fit(vector.getSource().getExtent(), map.getSize());
},
error: function(xhr, desc, err) {
document.getElementById('map').style.cursor = 'default';
if (window.console) console.log('error()', xhr, desc, err);
},
context: this
});
if (window.console) console.log("TheApp.onSelectAddress() ... done");
};
showMultiLineShape: function(locationModel) {
let lineObject = locationModel
.get('multiline')
.map(line => line.map(coords => convertPointCoordinate(coords)))
let feature = new Openlayers.Feature({
geometry: new Openlayers.geom.MultiLineString(lineObject),
})
feature.setId(locationModel.cid)
const styles = [
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: locationModel.get('color') || defaultColor,
width: 4,
}),
}),
]
feature.setStyle(styles)
return this.createVectorLayer(locationModel, feature)
},
module.exports = function OpenlayersMap(
insertionElement,
selectionInterface,
notificationEl,
componentElement,
mapModel
) {
let overlays = {}
let shapes = []
const map = createMap(insertionElement)
listenToResize()
setupTooltip(map)
const drawingTools = setupDrawingTools(map)
function setupTooltip(map) {
map.on('pointermove', function(e) {
const point = unconvertPointCoordinate(e.coordinate)
if (!offMap(point)) {
mapModel.updateMouseCoordinates({
lat: point[1],
lon: point[0],
})
} else {
mapModel.clearMouseCoordinates()
}
})
}
function setupDrawingTools(map) {
return {
bbox: new DrawBBox.Controller({
map,
notificationEl,
}),
circle: new DrawCircle.Controller({
map,
notificationEl,
}),
polygon: new DrawPolygon.Controller({
map,
notificationEl,
}),
line: new DrawLine.Controller({
map,
notificationEl,
}),
}
}
function resizeMap() {
map.updateSize()
}
function listenToResize() {
wreqr.vent.on('resize', resizeMap)
}
function unlistenToResize() {
wreqr.vent.off('resize', resizeMap)
}
const exposedMethods = _.extend({}, Map, {
drawLine(model) {
drawingTools.line.draw(model)
},
drawBbox(model) {
drawingTools.bbox.draw(model)
},
drawCircle(model) {
drawingTools.circle.draw(model)
},
drawPolygon(model) {
drawingTools.polygon.draw(model)
},
destroyDrawingTools() {
drawingTools.line.destroy()
drawingTools.polygon.destroy()
drawingTools.circle.destroy()
drawingTools.bbox.destroy()
},
onLeftClick(callback) {
$(map.getTargetElement()).on('click', function(e) {
const boundingRect = map.getTargetElement().getBoundingClientRect()
callback(e, {
mapTarget: determineIdFromPosition(
[e.clientX - boundingRect.left, e.clientY - boundingRect.top],
map
),
})
})
},
onRightClick(callback) {
$(map.getTargetElement()).on('contextmenu', function(e) {
const boundingRect = map.getTargetElement().getBoundingClientRect()
callback(e)
})
},
onMouseMove(callback) {
$(map.getTargetElement()).on('mousemove', function(e) {
const boundingRect = map.getTargetElement().getBoundingClientRect()
callback(e, {
mapTarget: determineIdFromPosition(
[e.clientX - boundingRect.left, e.clientY - boundingRect.top],
map
),
})
})
},
onCameraMoveStart(callback) {
map.on('movestart', callback)
},
onCameraMoveEnd(callback) {
map.on('moveend', callback)
},
doPanZoom(coords) {
const that = this
that.zoomOut({ duration: 1000 }, () => {
setTimeout(() => {
that.zoomToExtent(coords, { duration: 2000 })
}, 0)
})
},
zoomOut(opts, next) {
next()
},
zoomToSelected() {
if (selectionInterface.getSelectedResults().length === 1) {
this.panToResults(selectionInterface.getSelectedResults())
}
},
panToResults(results) {
const coordinates = _.flatten(
results.map(function(result) {
return result.getPoints()
}),
true
)
this.panToExtent(coordinates)
},
panToExtent(coords) {
if (coords.constructor === Array && coords.length > 0) {
const lineObject = coords.map(function(coordinate) {
return convertPointCoordinate(coordinate)
})
const extent = Openlayers.extent.boundingExtent(lineObject)
map.getView().fit(extent, {
size: map.getSize(),
maxZoom: map.getView().getZoom(),
duration: 500,
})
}
},
zoomToExtent(coords, opts = {}) {
const lineObject = coords.map(function(coordinate) {
return convertPointCoordinate(coordinate)
})
const extent = Openlayers.extent.boundingExtent(lineObject)
map.getView().fit(extent, {
size: map.getSize(),
duration: 500,
...opts,
})
},
zoomToBoundingBox({ north, east, south, west }) {
this.zoomToExtent([[west, south], [east, north]])
},
limit(value, min, max) {
return Math.min(Math.max(value, min), max)
},
getBoundingBox() {
const extent = map.getView().calculateExtent(map.getSize())
let longitudeEast = wrapNum(extent[2], -180, 180)
const longitudeWest = wrapNum(extent[0], -180, 180)
//add 360 degrees to longitudeEast to accommodate bounding boxes that span across the anti-meridian
if (longitudeEast < longitudeWest) {
longitudeEast += 360
}
return {
north: this.limit(extent[3], -90, 90),
east: longitudeEast,
south: this.limit(extent[1], -90, 90),
west: longitudeWest,
}
},
overlayImage(model) {
const metacardId = model.get('properties').get('id')
this.removeOverlay(metacardId)
const coords = model.getPoints('location')
const array = _.map(coords, function(coord) {
return convertPointCoordinate(coord)
})
const polygon = new Openlayers.geom.Polygon([array])
const extent = polygon.getExtent()
const projection = Openlayers.proj.get(properties.projection)
const overlayLayer = new Openlayers.layer.Image({
source: new Openlayers.source.ImageStatic({
url: model.get('currentOverlayUrl'),
projection,
imageExtent: extent,
}),
})
map.addLayer(overlayLayer)
overlays[metacardId] = overlayLayer
},
removeOverlay(metacardId) {
if (overlays[metacardId]) {
map.removeLayer(overlays[metacardId])
delete overlays[metacardId]
}
},
removeAllOverlays() {
for (const overlay in overlays) {
if (overlays.hasOwnProperty(overlay)) {
map.removeLayer(overlays[overlay])
}
}
overlays = {}
},
getCartographicCenterOfClusterInDegrees(cluster) {
return utility.calculateCartographicCenterOfGeometriesInDegrees(
cluster.get('results').map(function(result) {
return result
})
)
},
getWindowLocationsOfResults(results) {
return results.map(function(result) {
const openlayersCenterOfGeometry = utility.calculateOpenlayersCenterOfGeometry(
result
)
const center = map.getPixelFromCoordinate(openlayersCenterOfGeometry)
if (center) {
return center
} else {
return undefined
}
})
},
/*
Adds a billboard point utilizing the passed in point and options.
Options are a view to relate to, and an id, and a color.
*/
addPointWithText(point, options) {
const pointObject = convertPointCoordinate(point)
const feature = new Openlayers.Feature({
geometry: new Openlayers.geom.Point(pointObject),
})
feature.setId(options.id)
feature.setStyle(
new Openlayers.style.Style({
image: new Openlayers.style.Icon({
img: DrawingUtility.getCircleWithText({
fillColor: options.color,
text: options.id.length,
}),
imgSize: [44, 44],
}),
})
)
const vectorSource = new Openlayers.source.Vector({
features: [feature],
})
const vectorLayer = new Openlayers.layer.Vector({
source: vectorSource,
zIndex: 1,
})
map.addLayer(vectorLayer)
return vectorLayer
},
/*
Adds a billboard point utilizing the passed in point and options.
Options are a view to relate to, and an id, and a color.
*/
addPoint(point, options) {
const pointObject = convertPointCoordinate(point)
const feature = new Openlayers.Feature({
geometry: new Openlayers.geom.Point(pointObject),
name: options.title,
})
feature.setId(options.id)
let x = 39,
y = 40
if (options.size) {
x = options.size.x
y = options.size.y
}
feature.setStyle(
new Openlayers.style.Style({
image: new Openlayers.style.Icon({
img: DrawingUtility.getPin({
fillColor: options.color,
icon: options.icon,
}),
imgSize: [x, y],
anchor: [x / 2, 0],
anchorOrigin: 'bottom-left',
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
}),
})
)
const vectorSource = new Openlayers.source.Vector({
features: [feature],
})
const vectorLayer = new Openlayers.layer.Vector({
source: vectorSource,
zIndex: 1,
})
map.addLayer(vectorLayer)
return vectorLayer
},
/*
Adds a polyline utilizing the passed in line and options.
Options are a view to relate to, and an id, and a color.
*/
addLine(line, options) {
const lineObject = line.map(function(coordinate) {
return convertPointCoordinate(coordinate)
})
const feature = new Openlayers.Feature({
geometry: new Openlayers.geom.LineString(lineObject),
name: options.title,
})
feature.setId(options.id)
const styles = [
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: 'white',
width: 8,
}),
}),
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: options.color || defaultColor,
width: 4,
}),
}),
]
feature.setStyle(styles)
const vectorSource = new Openlayers.source.Vector({
features: [feature],
})
const vectorLayer = new Openlayers.layer.Vector({
source: vectorSource,
})
map.addLayer(vectorLayer)
return vectorLayer
},
/*
Adds a polygon fill utilizing the passed in polygon and options.
Options are a view to relate to, and an id.
*/
addPolygon(polygon, options) {},
/*
Updates a passed in geometry to reflect whether or not it is selected.
Options passed in are color and isSelected.
*/
updateCluster(geometry, options) {
if (geometry.constructor === Array) {
geometry.forEach(
function(innerGeometry) {
this.updateCluster(innerGeometry, options)
}.bind(this)
)
} else {
const feature = geometry.getSource().getFeatures()[0]
const geometryInstance = feature.getGeometry()
if (geometryInstance.constructor === Openlayers.geom.Point) {
geometry.setZIndex(options.isSelected ? 2 : 1)
feature.setStyle(
new Openlayers.style.Style({
image: new Openlayers.style.Icon({
img: DrawingUtility.getCircleWithText({
fillColor: options.color,
strokeColor: options.outline,
text: options.count,
textColor: options.textFill,
}),
imgSize: [44, 44],
}),
})
)
} else if (
geometryInstance.constructor === Openlayers.geom.LineString
) {
const styles = [
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: 'rgba(255,255,255, .1)',
width: 8,
}),
}),
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: 'rgba(0,0,0, .1)',
width: 4,
}),
}),
]
feature.setStyle(styles)
}
}
},
/*
Updates a passed in geometry to reflect whether or not it is selected.
Options passed in are color and isSelected.
*/
updateGeometry(geometry, options) {
if (geometry.constructor === Array) {
geometry.forEach(
function(innerGeometry) {
this.updateGeometry(innerGeometry, options)
}.bind(this)
)
} else {
const feature = geometry.getSource().getFeatures()[0]
const geometryInstance = feature.getGeometry()
if (geometryInstance.constructor === Openlayers.geom.Point) {
let x = 39,
y = 40
if (options.size) {
x = options.size.x
y = options.size.y
}
geometry.setZIndex(options.isSelected ? 2 : 1)
feature.setStyle(
new Openlayers.style.Style({
image: new Openlayers.style.Icon({
img: DrawingUtility.getPin({
fillColor: options.color,
strokeColor: options.isSelected ? 'black' : 'white',
icon: options.icon,
}),
imgSize: [x, y],
anchor: [x / 2, 0],
anchorOrigin: 'bottom-left',
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
}),
})
)
} else if (
geometryInstance.constructor === Openlayers.geom.LineString
) {
const styles = [
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: options.isSelected ? 'black' : 'white',
width: 8,
}),
}),
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: options.color || defaultColor,
width: 4,
}),
}),
]
feature.setStyle(styles)
}
}
},
/*
Updates a passed in geometry to be hidden
*/
hideGeometry(geometry) {
geometry.setVisible(false)
},
/*
Updates a passed in geometry to be shown
*/
showGeometry(geometry) {
geometry.setVisible(true)
},
removeGeometry(geometry) {
map.removeLayer(geometry)
},
showPolygonShape(locationModel) {
const polygon = new DrawPolygon.PolygonView({
model: locationModel,
map,
})
shapes.push(polygon)
},
showCircleShape(locationModel) {
const circle = new DrawCircle.CircleView({
model: locationModel,
map,
})
shapes.push(circle)
},
showLineShape(locationModel) {
const line = new DrawLine.LineView({
model: locationModel,
map,
})
shapes.push(line)
},
showMultiLineShape(locationModel) {
let lineObject = locationModel
.get('multiline')
.map(line => line.map(coords => convertPointCoordinate(coords)))
let feature = new Openlayers.Feature({
geometry: new Openlayers.geom.MultiLineString(lineObject),
})
feature.setId(locationModel.cid)
const styles = [
new Openlayers.style.Style({
stroke: new Openlayers.style.Stroke({
color: locationModel.get('color') || defaultColor,
width: 4,
}),
}),
]
feature.setStyle(styles)
return this.createVectorLayer(locationModel, feature)
},
createVectorLayer(locationModel, feature) {
let vectorSource = new Openlayers.source.Vector({
features: [feature],
})
let vectorLayer = new Openlayers.layer.Vector({
source: vectorSource,
})
map.addLayer(vectorLayer)
overlays[locationModel.cid] = vectorLayer
return vectorLayer
},
destroyShape(cid) {
const shapeIndex = shapes.findIndex(shape => cid === shape.model.cid)
if (shapeIndex >= 0) {
shapes[shapeIndex].destroy()
shapes.splice(shapeIndex, 1)
}
},
destroyShapes() {
shapes.forEach(function(shape) {
shape.destroy()
})
shapes = []
},
getOpenLayersMap() {
return map
},
destroy() {
this.destroyDrawingTools()
unlistenToResize()
},
})
return exposedMethods
}
build() {
console.log(this.getDataConfig())
let element = document.getElementById(this.getElementId());
if (element && this.getElementId() != "preview") {
element.className = this.getCssClass();
element.style.height = (this.height.slice(0, this.width.length - 3) == "px") ? this.height : this.height + "px";
element.style.width = (this.width.slice(0, this.width.length - 3) == "px") ? this.width : this.width + "px";
}
let feature_source = new olSource.Vector({
features: []
});
for (let sensor in this.dataConfig) {
if (sensor != 'library_path') {
let feature = new olFeature({
geometry: new olGeom.Point(olProj.transform(this.dataConfig[sensor].coordinates, 'EPSG:4326', 'EPSG:3857'))
});
feature.setProperties({
name: sensor,
iconURL: "http://www.quicklogic.com/assets/Uploads/al3s2/sensor-icon-temp.png",
date: this.dataConfig[sensor].lastObservation.date,
value: this.dataConfig[sensor].lastObservation.value,
uom: this.dataConfig[sensor].observedSpec.uom,
interval: this.dataConfig[sensor].observedSpec.intervals
});
feature_source.addFeature(feature);
}
}
let defaultStyle = new olStyle.Circle({
radius: 10,
stroke: new olStyle.Stroke({
color: '#fff'
}),
fill: new olStyle.Fill({
color: '#3399CC'
})
});
let that = this;
let styleCache = {}
let layers = [
new olLayer.Tile({
source: new olSource.OSM()
}),
new olLayer.Vector({
source: feature_source,
style: (feature) => {
if (!styleCache[feature.get('name')]) {
styleCache[feature.get('name')] = new olStyle.Style({
image: new olStyle.Icon({
anchor: [0.5, 0.5],
offset: [0, 0],
scale: 0.25,
src: WidgetFunctions.getUrlByValue(feature.get('value'), feature.get('interval'))
}),
text: new olStyle.Text({
text: `${feature.get('name')}\n${parseFloat(feature.get('value')).toFixed(2)} ${feature.get('uom')}\n${moment(feature.get('date')).format('DD-MM-YYYY')}\n${moment(feature.get('date')).format('HH:mm')}`,
fill: new olStyle.Fill({
color: 'white'
}),
stroke: new olStyle.Stroke({
width: 3,
color: 'black'
}),
font: '13px sans-serif',
offsetY: 60
})
});
}
return styleCache[feature.get('name')];
}
})
];
let map = new olMap({
target: this.getElementId(),
loadTilesWhileInteracting: true,
loadTilesWhileAnimating: true,
layers: layers,
view: new olView({
center: olProj.transform([22, 44], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
})
map.getView().fit(feature_source.getExtent(), {
padding: [20, 20, 20, 20]
});
return this;
}
constructor(props) {
super(props);
this.feature = new ol.Feature({});
this.feature.setId(props.id);
this.updateFromProps(props);
}
updateFromProps(props) {
this.feature.setStyle(buildStyle(props.style));
}