您的位置：首页 > Web前端 > JavaScript

arcgis for js 点投影实现

2018-01-05 19:41 295 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： arcgis for js project 投影

相关文章推荐

新的分享

章节导航