arcgis for js 點投影實現
阿新 • • 發佈：2019-01-28
1.本例中使用服務連結可以在arcgis server manager中拿到；
2.實現點投影功能；
程式碼如下：
<!DOCTYPE html> <html> <head> <title>墨卡託投影一個點</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Shapes and Symbols</title> <link rel="stylesheet" type="text/css" href="http://localhost:8087/arcgis_js_api/library/3.22/3.22/esri/css/esri.css" /> <script src="http://localhost:8087/arcgis_js_api/library/3.22/3.22/init.js"></script> <script src="https://js.arcgis.com/3.23/"></script> <script src="../js/jquery-1.3.1.js"></script> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } </style> <script> var map, tb; var geometryService; var pt,graphic; var _SimpleMarkerSymbol,_SpatialReference,_ProjectParameters,_Graphic; require([ "esri/map", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureFillSymbol", "esri/symbols/SimpleFillSymbol", "esri/graphic", "esri/Color", "dojo/dom", "dojo/on", "esri/layers/ArcGISTiledMapServiceLayer", "esri/tasks/GeometryService","esri/SpatialReference","esri/tasks/ProjectParameters","esri/geometry/Geometry","dojo/_base/array", "esri/InfoTemplate", "dojo/domReady!" ], function( Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, PictureFillSymbol, SimpleFillSymbol, Graphic, Color, dom, on, ArcGISTiledMapServiceLayer,GeometryService,SpatialReference,ProjectParameters,Geometry,array, InfoTemplate ) { _SimpleMarkerSymbol=SimpleMarkerSymbol; _SpatialReference=SpatialReference; _ProjectParameters=ProjectParameters; _Graphic=Graphic; map = new Map("mapDiv", { "xmin":126.08797131337525,"ymin":41.88483304829672,"xmax":130.05572254059723,"ymax":47.20292839632739, "spatialReference":{"wkid":4326} }); var oilAndGasLayer = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/itms/MapServer"); map.addLayer(oilAndGasLayer); geometryService=GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); map.on("click",function(evt){ map.graphics.clear(); var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 1), new Color([0,255,0,1])); console.log(evt.mapPoint); graphic = new Graphic(evt.mapPoint, markerSymbol); map.graphics.add(graphic); var params = new ProjectParameters(); params.outSR=new SpatialReference({wkid:102100}); params.geometries=[graphic.geometry]; geometryService.project(params, projectToWebMercator); }); function projectToWebMercator(features) { debugger pt = features[0]; graphic.setInfoTemplate(new InfoTemplate("Coordinates", "<p> X: " + pt.x + "<br/> Y: " + pt.y + "</p>" + "<input type='button' id='projectLatLong' value=Convert back to LatLong' onclick='projectToLatLong();'/>" + "<div id='latlong'></div>")); } }); function projectToLatLong() { debugger var symbol = new _SimpleMarkerSymbol(); var graphic = new _Graphic(pt, symbol); var params = new _ProjectParameters(); params.outSR=new _SpatialReference({wkid:4326}); params.geometries=[graphic.geometry ]; geometryService.project(params, function(features) { var pt = features[0]; dojo.byId("latlong").innerHTML = " Latitude = " + pt.y + "<br/> Longitude = " + pt.x; }); } </script> </head> <body> <b>Click a location on the map to Project from LatLng -> Web Mercator:</b> <div id="mapDiv" style="width:600px; height:400px; border:1px solid #000;"></div> </body> </html>