ArcGIS API for JavaScript 3.x 点击拾取坐标

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>点击拾取点坐标</title><link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.15/3.15/dijit/themes/claro/claro.css" /><link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.15/3.15/esri/css/esri.css" /><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script><script src="http://localhost/arcgis_js_api/library/3.15/3.15/init.js" type="text/javascript"></script><style>.info {top: 20px;color: #444;height: auto;font-family: arial;right: 20px;margin: 5px;padding: 10px;position: absolute;width: 45px;z-index: 40;border: solid 2px #666;border-radius: 4px;background-color: #fff;}button {display: block;}</style></head><body><div id="map" style="width:100%;height:100%;"></div><div class="info"><button>清除</button></div><span style="position:absolute; left:100px; bottom:30px; color:#000; z-index:50;">动态点坐标</span> <span id="info" style="position:absolute; left:200px; bottom:30px; color:#000; z-index:50;"></span> <span style="position:absolute; left:400px; bottom:30px; color:#000; z-index:50;">点击后获取的点坐标</span> <span id="info2" style="position:absolute; left:570px; bottom:30px; color:#000; z-index:50;"></span> </body>
</html><script>var map;require(["dojo/_base/declare","dojo/dom","dojo/dom-construct","esri/map","esri/toolbars/draw","esri/geometry/webMercatorUtils",'esri/geometry/Point',"dojo/domReady!"], function(declare,dom,domConstruct,Map,Draw,webMercatorUtils,Point,LabelClass) {var _C = false;var startExtent = new esri.geometry.Extent(114.309, 30.578, 115, 37,new esri.SpatialReference({ wkid:4326}) );map = new Map("map", {extent:startExtent,center: [114.309, 30.578], //地图加载后，初始位置zoom: 12, //放大级别，值越大放大的比例就越大slider: false,maxZoom: 16, //地图最大缩放级别minZoom: 7, //地图最小缩放级别logo: false, //不显示Esri的logo});var points = [];var pointSymbol;pointSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([255, 0, 0, 1]));dojo.connect(map, "onClick", Click);function Click(e) {points.push(e.mapPoint);map.graphics.add(new esri.Graphic(e.mapPoint, pointSymbol));_C = true;var centerPoint = e.mapPoint;var centerXY = webMercatorUtils.webMercatorToGeographic(e.mapPoint);var coreX = centerXY.x.toFixed(3);var coreY = centerXY.y.toFixed(3);dom.byId("info2").innerHTML = coreX + ", " + coreY;var textSymbol = new esri.symbol.TextSymbol(coreX+"      "+coreY);var font  = new esri.symbol.Font();textSymbol.xoffset = 0;textSymbol.yoffset = 12;font.setSize("14px");textSymbol.setFont(font);var center = new esri.Graphic(centerPoint,textSymbol);   map.graphics.add(center);}      dojo.connect(map,"onMouseMove",showCoordinates);dojo.connect(map,"onMouseDrag",showCoordinates);function showCoordinates(evt) {var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);}//加载地图服务var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer");map.addLayer(myTiledMapServiceLayer); //添加到地图中$(".info").on("click", function(event) {var Eventsource = event.targetswitch(Eventsource.innerHTML) {case "清除": clearAction();break;}});//清空函数function clearAction() {map.enableScrollWheelZoom();map.graphics.clear();_C = false;}});
</script>

ArcGIS API for JavaScript 3.x 点击拾取坐标相关推荐

创建类（点击获得位置信息）—ArcGIS API for JavaScript
不知道大家有没有这种体验,我们开始学web开发的时候,会把HTML.JavaScript.CSS代码都堆叠在一个HTML文件中,慢慢地,随着代码量的增多,不同的代码堆叠在一起显得很乱,我们开始把htm ...
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）
目的: 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能,鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性 ...
ArcGIS API for JavaScript心得体验
首发GIS派:ArcGIS API for JavaScript心得体验学习和使用ArcGIS API for JavaScript开发差不多有两年了吧,跌跌撞撞断断续续也做了几个小项目,学习之路相 ...
缓冲区分析—ArcGIS API for JavaScript
缓冲区分析是地理信息系统中的空间分析基本功能之一,是众多空间分析方法的基础.缓冲区分析是指为了识别某地理实体或空间物体对其周围的邻近性或影响度而在其周围建立的一定宽度的带状区. 缓冲区介绍缓冲区分析 ...
ArcGIS API for JavaScript——绘制工具（Draw）
ArcGIS API for JavaScript--绘制工具(Draw) 在WEB GIS开发过程中,我们不可避免的会用到绘制工具.比如利用绘制工具执行查询任务和利用绘制工具绘制空间分析的处理范围等 ...
ArcGIS API for JavaScript之基础篇（二）
ArcGIS API for JavaScript之基础篇(二) 上一篇文章介绍了Map MapView SceneView的基本知识以及简单的demo.最近几天学习了WebMap WebScene ...
ArcGIS API for JavaScript 3.24 文字标注的添加和带背景的文字添加
说明:本人是一个gis小白,由于网上的资料过于专业,当时学习的时候经常看不懂,于是写了一些简单的关于ArcGIS Api for javaScript分享,若该分享中出现错误,希望大家指出,若能帮助到 ...
地理信息系统（GIS）系列——ArcGIS API for JavaScript 3.9（1）
Visual Studio 智能提示配置:将以下 JavaScript 文件引入项目中 arcgis_js_v39_sdk\arcgis_js_api\sdk\jshelp\jsapi_vsdoc12 ...
Arcgis api for Javascript + arcgisServer + arcSDE笔记（1）
最近要搞的项目要用Arcgis api for Javascript做地图模块,自己开始学相关的技术.这是之前整理的笔记,现在传到博客上,也作为学习的记录 0 环境搭建 Arcgis软件统一使用10. ...

ArcGIS API for JavaScript 3.x 点击拾取坐标

ArcGIS API for JavaScript 3.x 点击拾取坐标相关推荐

最新文章

热门文章