Created
June 18, 2015 14:49
-
-
Save kcarrier/7dd8abbbf45f09b02974 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
define([ | |
'dojo/_base/declare', | |
'dijit/_WidgetBase', | |
'dijit/_TemplatedMixin', | |
'dijit/_WidgetsInTemplateMixin', | |
'dojox/grid/DataGrid', | |
'dojo/data/ItemFileWriteStore', | |
'dojo/_base/lang', | |
'dojo/topic', | |
'dojo/aspect', | |
'esri/layers/GraphicsLayer', | |
'esri/graphic', | |
'esri/renderers/SimpleRenderer', | |
'esri/symbols/PictureMarkerSymbol', | |
'esri/graphicsUtils', | |
'esri/geometry/Point', | |
'esri/SpatialReference', | |
'esri/geometry/Extent', | |
'esri/geometry/webMercatorUtils', | |
'dojo/dom', | |
'//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js', | |
'dojo/text!./Projection/templates/Projection.html', | |
'xstyle/css!./Projection/css/Projection.css' | |
], function ( | |
declare, | |
_WidgetBase, | |
_TemplatedMixin, | |
_WidgetsInTemplateMixin, | |
DataGrid, ItemFileWriteStore, | |
lang, topic, aspect, | |
GraphicsLayer, Graphic, SimpleRenderer, PictureMarkerSymbol, graphicsUtils, Point, SpatialReference, Extent, webMercatorUtils, dom, | |
proj4, | |
template | |
) { | |
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { | |
map: null, | |
widgetsInTemplate: true, | |
templateString: template, | |
baseClass: 'gis_ProjectionDijit', | |
// proj4BaseURL default: http://spatialreference.org/ (no ssl) or //epsg.io/, or /local/folder/ | |
proj4BaseURL: '//epsg.io/', | |
// options are ESRI, EPSG and SR-ORG | |
// See http://spatialreference.org/ for more information | |
baseProjection: null, | |
proj4Catalog: 'EPSG', // case sensitive! | |
postCreate: function () { | |
this.inherited(arguments); | |
var map = this.map; | |
if (!map) { | |
console.log('MapInfo error::a map reference is required'); | |
this.destroy(); | |
return; | |
} | |
if (!window.proj4) { | |
window.proj4 = proj4; | |
} | |
this.pointSymbol = new PictureMarkerSymbol(require.toUrl('gis/dijit/Projection/images/crosshair32.png'), 32, 32); | |
this.pointGraphics = new GraphicsLayer({ | |
id: 'test_graphics', | |
title: 'Test' | |
}); | |
this.pointRenderer = new SimpleRenderer(this.pointSymbol); | |
this.pointRenderer.label = 'test'; | |
this.pointRenderer.description = 'test'; | |
this.pointGraphics.setRenderer(this.pointRenderer); | |
this.map.addLayer(this.pointGraphics); | |
this._createProjectionGrid(); | |
this.own(topic.subscribe('mapClickMode/currentSet', lang.hitch(this, 'setMapClickMode'))); | |
if (this.parentWidget && this.parentWidget.toggleable) { | |
this.own(aspect.after(this.parentWidget, 'toggle', lang.hitch(this, function () { | |
this.clearProjections(); | |
}))); | |
} | |
//initialize when map loaded | |
if (map.loaded) { | |
this._initialize(map); | |
} else { | |
map.on('load', lang.hitch(this, '_initialize', map)); | |
} | |
}, | |
setMapClickMode: function (mode) { | |
this.mapClickMode = mode; | |
}, | |
_createProjectionGrid: function () { | |
var data = { | |
identifier: 'id', | |
items: [] | |
}; | |
for (var i = 0; i < this.projectionList.length; i++) { | |
data.items.push({ 'id': i, 'name': this.projectionList[i].title, 'x': '', 'y': '' }); | |
} | |
this.projectionStore = new ItemFileWriteStore({ data: data }); | |
var layout = [ | |
{ 'name': 'Name', 'field': 'name', 'width': '24%', 'noresize': 'true', styles: 'bold;text-align: left;' }, | |
{ 'name': 'x', 'field': 'x', 'width': '38%', 'noresize': 'true', 'editable': 'true', styles: 'text-align: left;' }, | |
{ 'name': 'y', 'field': 'y', 'width': '38%', 'noresize': 'true', 'editable': 'true', styles: 'text-align: left;' } | |
]; | |
this.projectionGrid = new DataGrid({ | |
cellNavigation: false, | |
showHeader: true, | |
store: this.projectionStore, | |
structure: layout, | |
canSort: false, | |
singleClickEdit: true, | |
autoHeight: true | |
}, this.projectionGrid); | |
this.projectionGrid.on('ApplyEdit', lang.hitch(this, '_reProjection')); | |
this.projectionGrid.startup(); | |
}, | |
_initialize: function (map) { | |
map.on('click', lang.hitch(this, function (evt) { | |
if (this.mapClickMode === 'projection') { | |
this._onClick(evt); | |
} | |
})); | |
var wkid = this.map.spatialReference.wkid; | |
if (wkid === 102100) { // ESRI --> EPSG | |
wkid = 3857; | |
} | |
this.baseProjection = this.proj4Catalog + ':' + String(wkid); | |
if (this.proj4BaseURL.slice(-1) != '/') { | |
this.proj4BaseURL += '/'; | |
} | |
//load projection for each srid | |
for (var i = 0; i < this.projectionList.length; i++) { | |
var url = this.proj4BaseURL + String(this.projectionList[i].srid) + '.js'; | |
require([url]); | |
} | |
}, | |
_onClick: function (evt) { | |
var wgs84Point = webMercatorUtils.webMercatorToGeographic(evt.mapPoint); | |
wgs84Point.spatialReference = new SpatialReference(4326); | |
this._project(wgs84Point); | |
}, | |
_project: function (pnt) { | |
this._drawMarker(pnt); | |
var projectionstring = ''; | |
for (var i = 0; i < this.projectionList.length; i++) { | |
var key = this.proj4Catalog + ':' + String(this.projectionList[i].srid); | |
var srid = String(this.projectionList[i].srid); | |
if (srid == '3735') { | |
projectionstring = '+proj=lcc +lat_1=40.03333333333333 +lat_2=38.73333333333333 +lat_0=38 +lon_0=-82.5 +x_0=600000 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs'; | |
} | |
if (srid == '4326') { | |
projectionstring = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs'; | |
} | |
var projPnt = proj4(projectionstring,[pnt.x, pnt.y]); | |
var item = this.projectionGrid.getItem(i); | |
if (proj4.defs(key)) { | |
//var precision = proj4.defs(key).units == 'm' ? 2 : 7; // hack: if it ain't metres, it's degrees | |
this.projectionGrid.store.setValue(item, 'x', projPnt[0].toFixed(3)); | |
this.projectionGrid.store.setValue(item, 'y', projPnt[1].toFixed(3)); | |
} else { | |
this.projectionGrid.store.setValue(item, 'x', 'Error'); | |
this.projectionGrid.store.setValue(item, 'y', 'Error'); | |
//item.customStyles += 'background-color:#FFB93F;' | |
} | |
} | |
}, | |
_reProjection: function (rowIndex) { | |
var item = this.projectionGrid.getItem(rowIndex); | |
var wgs84str = ''; | |
var nad83str = ''; | |
var pnt = null; | |
var point = null; | |
if (this.projectionList[rowIndex].srid == '3735') { | |
wgs84str = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs'; | |
nad83str = '+proj=lcc +lat_1=40.03333333333333 +lat_2=38.73333333333333 +lat_0=38 +lon_0=-82.5 +x_0=600000 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs'; | |
pnt = proj4(nad83str, wgs84str, [item.x, item.y]); | |
} | |
if (this.projectionList[rowIndex].srid == '4326') { | |
wgs84str = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs'; | |
pnt = proj4(wgs84str,[item.x, item.y]); | |
} | |
// move marker and project from new position | |
point = new Point(pnt[0], pnt[1], new SpatialReference(4326)); | |
this._project(point); | |
this.zoomtoMarker(); // maybe turn this off or option | |
}, | |
_drawMarker: function (pnt) { | |
var graphic; | |
this.pointGraphics.clear(); | |
graphic = new Graphic(pnt); | |
this.pointGraphics.add(graphic); | |
}, | |
toggleMode: function (val) { | |
if (val) { | |
this.locatePoint(); | |
} else { | |
this.cancelProjection(); | |
} | |
}, | |
locatePoint: function () { | |
this.map.setMapCursor('crosshair'); | |
topic.publish('mapClickMode/setCurrent', 'projection'); | |
}, | |
cancelProjection: function () { | |
this.map.setMapCursor('auto'); | |
topic.publish('mapClickMode/setDefault'); | |
}, | |
clearProjections: function () { | |
//dojo.byId('toggleme').set('checked', false); // will raise the toggleMode event | |
//this.toggleMode.set('checked', false); | |
dom.byId('toggleme').set('checked', false); // will raise the toggleMode event | |
for (var i = 0; i < this.projectionList.length; i++) { | |
var item = this.projectionGrid.getItem(i); | |
this.projectionGrid.store.setValue(item, 'x', ''); | |
this.projectionGrid.store.setValue(item, 'y', ''); | |
} | |
this.pointGraphics.clear(); | |
}, | |
zoomtoMarker: function () { | |
var zoomExtent = null; | |
if (this.pointGraphics.graphics.length > 0) { | |
zoomExtent = this.getPointFeaturesExtent(this.pointGraphics.graphics); | |
} | |
this.map.setExtent(zoomExtent.expand(1.2)); | |
// if there is a poinmt in the layer, then go to it. | |
// or read the values entered in current tab, reproject?, and zoom to | |
}, | |
getPointFeaturesExtent: function (pointFeatures) { | |
var extent = graphicsUtils.graphicsExtent(pointFeatures); | |
if (extent === null && pointFeatures.length > 0) { | |
extent = this.getExtentFromPoint(pointFeatures[0]); | |
} | |
return extent; | |
}, | |
getExtentFromPoint: function (point) { | |
var sz = this.pointExtentSize; // hack | |
var pt = point.geometry; | |
var extent = new Extent({ | |
'xmin': pt.x - sz, | |
'ymin': pt.y - sz, | |
'xmax': pt.x + sz, | |
'ymax': pt.y + sz, | |
'spatialReference': { | |
wkid: this.map.spatialReference.wkid | |
} | |
}); | |
return extent; | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment