Retour à la documentation
/**
* @class spw.widgets.SpwImagejnet
*/
define([
'dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array',
'esri/layers/WebTiledLayer', 'esri/layers/GraphicsLayer', 'esri/geometry/Point', 'esri/symbols/PictureMarkerSymbol',
'esri/geometry/Polygon', 'esri/symbols/SimpleFillSymbol', 'esri/symbols/SimpleLineSymbol', 'dojo/_base/Color',
'esri/geometry/Polyline', 'spw/api/ProjectionManager', 'esri/graphic',
'spw/api/ConfigLoader', 'dijit/ConfirmDialog', 'dijit/form/CheckBox', 'dojo/cookie', 'dojo/dom-construct',
'spw/api/MessageManager', 'dojo/topic',
'spw/api/SpwBaseTemplatedWidget', 'dojo/_base/config'
], function(declare, lang, array,
WebTiledLayer, GraphicsLayer, Point, PictureMarkerSymbol,
Polygon, SimpleFillSymbol, SimpleLineSymbol, Color,
Polyline, ProjectionManager, Graphic,
ConfigLoader, ConfirmDialog, CheckBox, cookie, domConstruct,
MessageManager, topic,
_Templated, DojoConfig) {
return declare(_Templated, {
templateString: '<div style="width: 100%; height: 100%;"><div id="imajnetContainer" style="width: 100%; height: 100%; position: relative;"></div></div>',
confirmDialogStyle: 'width: 400px;',
confirmDialogTitle: 'Avertissement',
confirmDialogMessage: "Ce widget nécessite un fond de plan compatible. Le fond de plan actuel sera réactivé lorsque vous quitterez \"Imajnet\". Tout changement de fond de plan désactivera Imajnet.",
confirmDialogConfirmLabel: 'Continuer',
confirmDialogCancelLabel: 'Annuler',
saveChoiceText: 'Se souvenir de mon choix',
saveChoiceCookie: 'googlestreetviewcookie',
changeBaseMapTitle: 'Changement de fond de plan',
changeBaseMapContent: 'Le changement de fond de plan va désactiver Imajnet',
changeBaseMapStyle: 'width: 400px;',
serverUrl: 'https://service.imajnet.net/service',
loginRememberMe: false,
username: 'spw',
password: 'drivenby',
firstLoad: true,
_waitingBasemap: null,
switchBaseMapTo: 'OSM',
switchingBaseMapDictionary: {
OSM: 'OSM',
GOOGLE: 'GMAP_LAYER'
},
_newBaseMapServiceType: 'OSM',
iconClass: "imajnetIcon",
constructor: function(){
},
postCreate: function() {
this.inherited(arguments);
topic.subscribe('SPWBASEMAPCHOOSER_BASEMAP_CHANGED', lang.hitch(this, this.onBaseMapChanged));
//Require raphael.js independently because problems occure when minified with the others libraries
require([
'spw/libs/imajnet/lib/Raphael/raphael.min',
"spw/libs/imajnet/build/imajnet-build-libs"
], lang.hitch(this, function(Raphael) {
window.Raphael = Raphael;
var jsLoaded = true;
var cssLoaded = false;
//dynamically add libraries needed by imajnet
// var sc = document.createElement("script");
// sc.setAttribute("type", "text/javascript");
// sc.onload = lang.hitch(this, function(e){
// jsLoaded = true;
// jsLoaded && cssLoaded && this.onLibrariesLoaded();
// });
// document.head.appendChild(sc);
// sc.setAttribute("src", require.toUrl("spw/libs/imajnet/build/imajnet-build-libs.js"));
// dynamically add styles needed by imajnet
// no onload event because css is loaded sequentially
var css = document.createElement("link");
css.setAttribute("type", "text/css");
css.setAttribute("rel", "stylesheet");
document.head.appendChild(css);
css.setAttribute("href", require.toUrl("spw/libs/imajnet/build/imajnet-build-style.css"));
cssLoaded = true;
jsLoaded && cssLoaded && this.onLibrariesLoaded();
}))
},
getImajnetPath: function() {
var baseApiUrl = DojoConfig.geoviewerApiUrl;
if (baseApiUrl.indexOf("localhost") > -1) {
return baseApiUrl + "_4.0/spw/libs/imajnet";
}
return baseApiUrl + "4.0/spw/libs/imajnet";
},
onLibrariesLoaded: function() {
var self = this;
this.options = {
serverUrl: self.serverUrl,
loginRememberMe: self.loginRememberMe,
username: self.username,
sessionType: 'FULL',
goToClosestPointOfInterest: false,
password: self.password,
containerId: 'imajnetContainer', // Main image container id
// searchLRSContainerId: 'searchLRSContainer', // Optional: LRS search window container id
// searchAddressContainerId: 'searchAddressContainer', // Optional: search address window container id
// clipboardContainerId: 'clipboardContainer', // Optional: clipboard window container id
// clipboardExportContainerId: 'clipboardExportContainer', // Optional: clipboard export window container id
map: self.spwViewer.get('spwMap').get('esriMap'), // Map object reference
imajnetPath: (this.getImajnetPath()), // Path where imajnet files are located
activateImajnet: true,
clipboardActive: true, // Want to see all added photogrammetry objects
language: 'fr',
button: 'test',
metadata: 'Imajnet SDK' // An identifier for your application
};
ImajnetPlugin.onImajnetActivated = function() {
if(self.firstLoad) {
jQuery(jQuery('body > .imajnetItem')).each(function(index) {
jQuery(this).addClass('esriPopup').prepend('<div class="titlePane"><div onclick="imajnetWidget.onCloseCustomPopup(jQuery(this).parent().parent())" class="titleButton close" title="Close"></div></div>').draggable({
stack: ".imajnetItem"
});
});
self.firstLoad = false;
}
};
ImajnetPlugin.onImajnetDeactivated = function() {
console.log('imajnet deactivated');
jQuery('#imajnetActiveButtons').hide();
ImajnetUrl.urlParams = new Object();
};
ImajnetPlugin.imajnetLoginSuccess = function() {
console.log('imajnet on login success');
};
ImajnetPlugin.addImajnetLayerToMap = function() {
var imajnetUrl = ImajnetMap.getImajnetTileUrl().replace('{x}', '${col}').replace('{y}', '${row}').replace('{z}', '${level}')
var layer = {
"options": {
"id": "Imajnet layer",
"visible": true,
"copyright": "Imajing",
"attribution": "Imajnet layer <a href=\"http://www.imajnet.net\">Imajnet</a>"
},
"url": imajnetUrl
};
var lyr = new WebTiledLayer(layer.url, layer.options);
var imajnetLayer = self.spwViewer.get('spwMap').get('esriMap').addLayer(lyr);
return imajnetLayer;
};
ImajnetPlugin.removeLayerFromMap = function(layer) {
self.spwViewer.get('spwMap').get('esriMap').removeLayer(layer);
};
ImajnetPlugin.addVectorLayerToMap = function(name) {
//return L.geoJson().addTo(map);
var layer = new GraphicsLayer({
id: name
});
return self.spwViewer.get('spwMap').get('esriMap').addLayer(layer);
};
ImajnetPlugin.addMarkerLayerToMap = function(name) {
//return L.geoJson().addTo(map);
var layer = new GraphicsLayer({
id: name
});
return self.spwViewer.get('spwMap').get('esriMap').addLayer(layer);
};
ImajnetPlugin.addMarker = function(markerLayer, markerData) {
var point = new Point(markerData.lon, markerData.lat);
var symbol = new PictureMarkerSymbol(markerData.imagePath, markerData.size.width, markerData.size.height);
if(markerData.type == 'imajbox') {
symbol.setWidth(25);
symbol.setHeight(20);
}
var marker = new Graphic(point, symbol);
markerLayer.add(marker);
var featureWrapper = new FeatureWrapper();
featureWrapper.setFeature(marker);
dojo.connect(markerLayer, "onClick", function(event) {
markerData.onClick(event, featureWrapper);
});
dojo.connect(markerLayer, "mouseover", function(event) {
markerData.onMouseOver(event, featureWrapper);
});
dojo.connect(markerLayer, "mouseout", function(event) {
markerData.onMouseOut(event, featureWrapper);
});
return featureWrapper;
};
ImajnetPlugin.convertHex = function(hex, opacity) {
if(!hex) {
return;
}
if(!opacity) {
var opacity = 1;
}
hex = hex.replace('#', '');
r = parseInt(hex.substring(0, 2), 16);
g = parseInt(hex.substring(2, 4), 16);
b = parseInt(hex.substring(4, 6), 16);
result = [r, g, b, opacity];
return result;
};
ImajnetPlugin.addFeature = function(vectorLayer, pointsArray, featureOptions) {
if(!vectorLayer) {
return;
}
if(pointsArray[0] && pointsArray[0][0]) { // TODO implement multipolygon
pointsArray = pointsArray[0];
if(featureOptions.type == 'MultiPolygon') {
featureOptions.type = 'Polygon';
}
}
var points = new Array();
for(var i = 0, length = pointsArray.length; i < length; ++i) {
var point = [pointsArray[i].x, pointsArray[i].y];
//point = esri.geometry.geographicToWebMercator(point);
points.push(point);
}
var polygon = new Polygon(points);
var fill = new SimpleFillSymbol();
fill.setColor(new Color(ImajnetPlugin.convertHex(featureOptions.fillColor, featureOptions.fillOpacity)));
if(featureOptions.type == 'LineString') {
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color(featureOptions.strokeColor), featureOptions.strokeWidth);
fill.setOutline(lineSymbol);
} else {
fill.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color('#000000'), featureOptions.strokeWidth));
}
var feature = new Graphic(polygon, fill);
vectorLayer.add(feature);
var featureWrapper = new FeatureWrapper();
featureWrapper.setFeature(feature);
return featureWrapper;
};
ImajnetPlugin.removeMarkerFeatures = function(vectorLayer, markersWrapper) {
for(var i = 0, length = markersWrapper.length; i < length; ++i) {
ImajnetPlugin.removeMarker(vectorLayer, markersWrapper[i]);
}
};
ImajnetPlugin.removeFeatures = function(vectorLayer, featuresWrappers) {
if(!vectorLayer || vectorLayer.length == 0 || !featuresWrappers) {
return;
}
for(var i = 0; i < featuresWrappers.length; i++) {
vectorLayer.remove(featuresWrappers[i].feature);
}
};
ImajnetPlugin.removeMarker = function(markerLayer, markerWrapper) {
// var a = '';
// return;
if(!markerLayer || markerLayer.length == 0 || !markerWrapper) {
return;
}
markerLayer.remove(markerWrapper.feature);
};
ImajnetPlugin.removeAllMarkersFromLayer = function(markerLayer) {
if(!markerLayer) {
return;
}
markerLayer.clear();
};
ImajnetPlugin.removeAllFeatures = function(vectorLayer) {
vectorLayer.clear();
vectorLayer.refresh();
};
ImajnetPlugin.selectMarker = function(markerLayer, markerWrapper) {
ImajnetPlugin.setMarkerOpacity(markerWrapper, 0.6);
};
ImajnetPlugin.unselectMarker = function(markerLayer, markerWrapper) {
ImajnetPlugin.setMarkerOpacity(markerWrapper, 1);
};
ImajnetPlugin.selectFeature = function(featureLayer, featureWrapper) {
if(featureWrapper.length) {
array.forEach(featureWrapper, function(wrapper) {
ImajnetPlugin.setFeatureColor(wrapper.feature, '#EE9900', 'line');
})
} else {
ImajnetPlugin.setFeatureColor(featureWrapper.feature, '#EE9900', 'line');
}
};
ImajnetPlugin.unselectFeature = function(featureLayer, featureWrapper) {
if(featureWrapper.length) {
array.forEach(featureWrapper, function(wrapper) {
ImajnetPlugin.setFeatureColor(wrapper.feature, '#00ff00', 'line');
})
} else {
ImajnetPlugin.setFeatureColor(featureWrapper.feature, '#00ff00', 'line');
}
};
ImajnetPlugin.selectPolygonFeature = function(featureLayer, featureWrapper) {
ImajnetPlugin.setFeatureColor(featureWrapper.feature, '#EE9900', 'polygon');
};
ImajnetPlugin.unselectPolygonFeature = function(featureLayer, featureWrapper) {
ImajnetPlugin.setFeatureColor(featureWrapper.feature, '#ff0000', 'polygon');
};
ImajnetPlugin.setFeatureColor = function(feature, color, type) {
var svg = feature.getNode();
if(!svg) {
return;
}
if(type == 'line') {
svg.setAttribute('stroke', color);
} else {
svg.setAttribute('fill', color);
}
};
ImajnetPlugin.setMarkerOpacity = function(markerWrapper, opacity) {
jQuery(markerWrapper.feature.getNode()).css('opacity', opacity);
};
ImajnetPlugin.setLayerZIndex = function(layer, zIndex) {
self.spwViewer.get('spwMap').get('esriMap').reorderLayer(layer, 1)
};
ImajnetPlugin.zoomMapTo = function(zoomLevel) {
self.spwViewer.get('spwMap').get('esriMap').setZoom(zoomLevel);
};
ImajnetPlugin.getCurrentZoomLevel = function() {
return self.spwViewer.get('spwMap').get('esriMap').getZoom();
};
ImajnetPlugin.centerMapToPosition = function(position, onlyIfNotVisible) {
/*
* if(onlyIfNotVisible && self.spwViewer.get('spwMap').get('esriMap').extent.contains(new Point(position.lon, position.lat))) { //self.spwViewer.get('spwMap').get('esriMap').panTo(new L.LatLng(position.lat, position.lon)); return; }
*/
self.spwViewer.get('spwMap').get('esriMap').centerAt(new Point(position.lon, position.lat));
};
ImajnetPlugin.getMapScale = function() {
//var scales = new Array(55467893.20400156, 27733946.60200078, 13866973.30100039, 6933486.650500195, 3466743.3252500976, 1733371.6626250488, 866685.8313125244, 433342.9156562622, 216671.4578281311, 108335.72891406555, 54167.864457032774, 27083.932228516387, 13541.966114258194, 6770.983057129097, 3385.4915285645484, 1692.7457642822742);
return self.spwViewer.get('spwMap').get('esriMap').getScale();
};
ImajnetPlugin.getClosestImage = function(lon, lat) {
//Set imajnet mode to closest image;
Imajnet.activateImajnetControl(null, 'closestImage');
//Pass the coordinates to the imajnet library
ImajnetMap.mapClickHandler({
lon: lon,
lat: lat
});
};
ImajnetPlugin.onMapClick = function(event) {
//if click on image feature layer
if(event.graphic && event.graphic.getLayer() == ImajnetMap.imajnetDragFeaturesLayer) {
var featureWrapper = imajnetWidget.getFeatureWrapperByFeature(event.graphic);
if(featureWrapper) {
if(featureWrapper.getType() == ImajnetMap.FEATURE_TYPE_ORIENTED_IMAGES) {
if(!Imajnet.imajnetOrientedImagesIsActive()) {
return;
}
if(featureWrapper.getId() > -1) {
ImajnetClickMode.moveImageToPosition(featureWrapper.getId());
}
return;
}
}
}
var pt = ProjectionManager.getInstance().transform(event.mapPoint.spatialReference.wkid, 4326, event.mapPoint);
ImajnetPlugin.getClosestImage(pt.getLongitude(), pt.getLatitude());
// ImajnetMap.mapClickHandler({
// lon: pt.getLongitude(),
// lat: pt.getLatitude()
// });
};
ImajnetPlugin.onDragEnd = function(event) {
//console.log('drag end');
};
ImajnetPlugin.onZoomEnd = function(event) {
ImajnetUrl.changeUrlParam(ImajnetUrl.ZOOM_URL_PARAM_NAME, ImajnetPlugin.getCurrentZoomLevel(), true);
ImajnetMap.mapZoomEndHandler();
//console.log('zoom end');
};
ImajnetPlugin.registerMapEvents = function() {
this.mapClickHandler = self.spwViewer.get('spwMap').get('esriMap').on('click', this.onMapClick);
this.mapDragEndHandler = self.spwViewer.get('spwMap').get('esriMap').on('pan-end', this.onDragEnd);
this.mapZoomEndHandler = self.spwViewer.get('spwMap').get('esriMap').on('zoom-end', this.onZoomEnd);
};
ImajnetPlugin.unregisterMapEvents = function() {
if(this.mapClickHandler !== null) {
this.mapClickHandler.remove();
this.mapClickHandler = null;
}
if(this.mapDragEndHandler !== null) {
this.mapDragEndHandler.remove();
this.mapDragEndHandler = null;
}
if(this.mapZoomEndHandler !== null) {
this.mapZoomEndHandler.remove();
this.mapZoomEndHandler = null;
}
};
ImajnetPlugin.onImajnetControlPressed = function(buttonElement, controlName) {
if(buttonElement.hasClass('opacity30')) {
Imajnet.deactivateImajnetControl(buttonElement, controlName);
} else {
Imajnet.activateImajnetControl(buttonElement, controlName);
}
};
ImajnetPlugin.onImageChange = function() {
jQuery('#imajnetLogo').hide();
};
// ImajnetPlugin.onPinPointCreated = function(response) {
// var geometry = new Point(response.point.coordinates.lon, response.point.coordinates.lat);
// imajnetWidget.createAddObjectToLayerHTML({
// geometry: geometry,
// type: 'point'
// });
// };
//
// ImajnetPlugin.onMeasurementCreated = function(response) {
// var points = new Array();
// points.push(response.measurement.firstPoint ? [response.measurement.firstPoint.lon, response.measurement.firstPoint.lat] : [response.firstPoint.lon, response.firstPoint.lat]);
// points.push(response.measurement.secondPoint ? [response.measurement.secondPoint.lon, response.measurement.secondPoint.lat] : [response.secondPoint.lon, response.secondPoint.lat]);
// var geometry = new Polyline(points);
// imajnetWidget.createAddObjectToLayerHTML({
// geometry: geometry,
// type: 'line'
// });
// };
//
// ImajnetPlugin.onPolyligneCreated = function(response) {
// var coordinates = response.pointsArray;
// var type = response.type;
// var points = new Array();
// array.forEach(coordinates, function(point) {
// points.push([point.x, point.y]);
// });
// var geometry = null;
// if(type.type == 'LineString') {
// geometry = esri.geometry.geographicToWebMercator(new Polyline(points));
// } else {
// geometry = esri.geometry.geographicToWebMercator(new Polygon(points));
// }
// imajnetWidget.createAddObjectToLayerHTML({
// geometry: geometry,
// type: type.type
// });
// };
ImajnetPlugin.addActiveState = function(container) {
container.addClass('opacity30');
};
ImajnetPlugin.removeActiveState = function(container) {
container.removeClass('opacity30');
};
ImajnetPlugin.hideImajnetItem = function(id) {
jQuery('#' + id).hide();
};
ImajnetPlugin.showImajnetItem = function(id, width, height) {
jQuery('#' + id).show();
};
ImajnetPlugin.onImageContainerMoved = function() {
ImajnetZoom.setDraggableContainment();
ImajnetUI.setSliderDraggableContainment();
};
},
onBaseMapChanged: function (basemap) {
if (this._waitingBasemap && basemap.baseMapId === this._waitingBasemap.baseMapId) {
this.onActivate();
}
else {
this._oldBasemap = null;
this.onDeactivate();
}
},
getCurrentBaseMap: function() {
var basemaps = this.spwViewer.get('spwMap').getMapServices({
isBaseMap: true,
visible: true
});
var baseMapConfig = ConfigLoader.getInstance().get('baseMap');
var currentBaseMap = null;
array.some(baseMapConfig, lang.hitch(this, function(baseMapConfig) {
return array.some(baseMapConfig.services, lang.hitch(this, function(service) {
if (array.some(basemaps, lang.hitch(this, function(basemap) {
return basemap.serviceId === service.serviceId || (basemap.serviceId === ('black-and-white-' + service.serviceId));
}))) {
currentBaseMap = baseMapConfig;
return true;
}
return false;
}));
}));
return currentBaseMap;
},
onActivate: function() {
this._newBaseMapServiceType = this.switchingBaseMapDictionary[this.switchBaseMapTo];
this._newBaseMapServiceType = this._newBaseMapServiceType ? this._newBaseMapServiceType : 'OSM';
if (this._waitingBasemap) {
this.inherited(arguments);
this.options.map = this.spwViewer.get('spwMap').get('esriMap');
//Activates imajnet
Imajnet.init(this.options).done(lang.hitch(this, function() {
var x = (this.spwViewer.get('spwMap').get('esriMap').extent.xmin + this.spwViewer.get('spwMap').get('esriMap').extent.xmax) / 2;
var y = (this.spwViewer.get('spwMap').get('esriMap').extent.ymin + this.spwViewer.get('spwMap').get('esriMap').extent.ymax) / 2;
var pt = ProjectionManager.getInstance().projectPoint(this.spwViewer.get('spwMap').getSpatialReferenceSRID(), 4326, x, y);
ImajnetPlugin.getClosestImage(pt.x, pt.y);
}));
}
else {
var currentBaseMap = this.getCurrentBaseMap();
var baseMapConfig = ConfigLoader.getInstance().get('baseMap');
var googleBaseMap = null;
if (array.some(currentBaseMap.services, lang.hitch(this, function(service) {
return service.type === this._newBaseMapServiceType;
}))) {
this._waitingBasemap = currentBaseMap;
this.onActivate();
}
else {
array.some(baseMapConfig, lang.hitch(this, function (basemap) {
if (array.some(basemap.services, lang.hitch(this, function (service) {
return service.type === this._newBaseMapServiceType;
}))) {
googleBaseMap = basemap;
}
return googleBaseMap != null;
}));
if (googleBaseMap) {
if (cookie(this.saveChoiceCookie) === 'true') {
cookie(this.saveChoiceCookie, 'true');
this._waitingBasemap = googleBaseMap;
this._oldBasemap = currentBaseMap;
topic.publish('SPWBASEMAPCHOOSER_LOCK_BASEMAP', googleBaseMap);
topic.publish('SPWBASEMAPCHOOSER_CHANGE_FROM_IMAJNET', true);
}
else {
var confirmDialog = new ConfirmDialog({
title: this.confirmDialogTitle,
content: this.confirmDialogMessage,
closable: false,
style: this.confirmDialogStyle,
buttonOk: this.confirmDialogConfirmLabel,
buttonCancel: this.confirmDialogCancelLabel
});
domConstruct.create("span", {
innerHTML: this.saveChoiceText,
style: 'margin-right: 60px;'
}, confirmDialog.actionBarNode, 'first');
var cbCookie = new CheckBox({
checked: cookie(this.saveChoiceCookie) != "false",
onClick: lang.hitch(this, this.openAtStartupClicked)
}, domConstruct.create("input", null, confirmDialog.actionBarNode, 'first'));
confirmDialog.on('execute', lang.hitch(this, function() {
cookie(this.saveChoiceCookie, cbCookie.get('checked').toString());
this._waitingBasemap = googleBaseMap;
this._oldBasemap = currentBaseMap;
topic.publish('SPWBASEMAPCHOOSER_LOCK_BASEMAP', googleBaseMap);
topic.publish('SPWBASEMAPCHOOSER_CHANGE_FROM_IMAJNET', true);
}));
confirmDialog.show();
}
}
else {
var errorMessage = 'Le widget Imajnet a été configuré pour être lancé avec un fond de ' +
'plan \'' + this.switchBaseMapTo + '\'. Malheureusement, aucun fond de plan de ce type n\'existe dans cette application.'
MessageManager.getInstance().notifyError(errorMessage);
}
}
}
},
onDeactivate: function() {
this.inherited(arguments);
if(typeof(Imajnet) !== 'undefined'){
Imajnet.deactivateImajnet();
}
this._waitingBasemap = null;
if (this._oldBasemap) {
topic.publish('SPWBASEMAPCHOOSER_CHANGE_BASEMAP', this._oldBasemap);
}
this._oldBasemap = null;
topic.publish('SPWBASEMAPCHOOSER_CHANGE_FROM_IMAJNET', false);
}
});
});