ArcGIS API for JavaScript实现坐标定位

坐标定位是gis系统中常用的功能
效果图

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0px;padding: 0px;}html,body{width: 100%;height: 100%;}.panel{position: relative;width: 100%;height: 100%;}.operatePanel{position: absolute;top:30px;left: 20px;width: 170px;height: 100px;background: #ffffff;border: 1px solid red;z-index: 1;}.formTr{width:100%;height:30px;}.formTr .label{float: left;width: 60px;height: 100%;line-height: 20px;/*text-align: right;*/font-size: 14px;}input{float: left;width: 100px;height: 20px;}#button{width: 60px;height: 30px;background: #5d87cc;color: #ffffff;line-height: 30px;text-align: center;font-size: 14px;font-weight:bold;margin: auto;}#map{position: absolute;left: 0px;top:0px;width: 100%;height: 100%;}</style><link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css"><script src="https://js.arcgis.com/3.21/"></script><script>require(["esri/map","esri/geometry/Point","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","esri/Color","esri/graphic","esri/layers/GraphicsLayer","dojo/on","dojo/dom","dojo/dom-attr","dojo/_base/lang"],function(Map,Point,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic,GraphicsLayer,on,dom,domAttr,lang){var map = new Map("map",{center: [110, 38.5],zoom: 5,maxZoom:18,minZoom:4,slider: false,basemap: "topo"});on(dom.byId("button"),"click",function () {clearGraphics();map.infoWindow.hide();//infowindow隐藏var px =domAttr.get("X","value");var py =domAttr.get("Y","value");if(px===""||py===""){alert("输入的值存在空值！");return;}var x=parseFloat(px);var y=parseFloat(py);var point = new Point(x,y,map.spatialReference);addGraphicsToMap(point,null,false,true,false,null);map.centerAndZoom(point,5);});//清空graphicsfunction clearGraphics() {map.graphics.clear();var  graphicsLayerIds = map.graphicsLayerIds;var len = graphicsLayerIds.length;for(var i=0;i<len;i++){var gLayer = map.getLayer(graphicsLayerIds[i]);gLayer.clear();}}function addGraphicsToMap(geometry,geometrySymbol,location,flash,attribute,infoTemplate) {var symbol=null;switch (geometry.type){case "point":symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1),new Color([0,255,0,0.25]));break;case "polyline":symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0,0.8]),2);break;case "polygon":symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),new Color([255,255,0,0.25]));break;case "extent":symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),new Color([255,255,0,0.25]));break;case "multipoint":symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([0,0,0]),1),new Color([255,255,0,0.5]));break;}if(geometrySymbol!=null){symbol = geometrySymbol;}if(location){//如果是定位功能的话，先清除，然后定位clearGraphics();}var _graphics = map.graphics.add(new Graphic(geometry,symbol))if(lang.isObject(attribute)){_graphics.setAttribute(attribute);}if(infoTemplate) {_graphics.setInfoTemplate(infoTemplate);}if(flash){var tempTime=0;_graphics.hide();var handler = null;handler=setInterval(function () {if(tempTime === 8){//规定闪烁的次数if(handler){if(!_graphics.visible){_graphics.show();}clearInterval(handler);handler =null;}return;}if(_graphics.visible){_graphics.hide();}else{_graphics.show();}tempTime++;},500);}var _graphicslayer = new GraphicsLayer();_graphicslayer.add(_graphics);map.addLayer(_graphicslayer);}});</script>
</head>
<body><div class="panel"><div class="operatePanel"><div class="formTr"><p class="label">X坐标：</p><input type="text" id="X" ></div><div class="formTr"><p class="label">Y坐标：</p><input type="text" id="Y" ></div><div class="formTr"><div id="button">查询</div></div></div><div id="map"></div></div>
</body>
</html>

ArcGIS API for JavaScript实现坐标定位相关推荐

arcgis api for javascript 4.16 定位功能的实现
一.定位功能,应用场景为自定义搜索框,可以用ajax搜索结果,然后单击定位.还有一种是下面说的,在element ui表格中,点击定位按钮,实现地图跳转定位. 效果: 二.代码部分. // 定位功能 ...
ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new ...
ArcGIS API for JavaScript——地图展示
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 3.23汉化（下）
ArcGIS API for JavaScript 3.23汉化(下) 4更为具体一.Default API configurations 默认API配置三.Retrieve data from ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
ArcGIS API for JavaScript Bookmarks(书签)
说明:本篇博文介绍的是ArcGIS API for JavaScript中的 Bookmarks(书签) ,书签的作用是,把地图放大到一个地方添加书签,书签名称可以和地图名称一直,单击标签地图会定 ...
ArcGIS API for JavaScript心得体验
首发GIS派:ArcGIS API for JavaScript心得体验学习和使用ArcGIS API for JavaScript开发差不多有两年了吧,跌跌撞撞断断续续也做了几个小项目,学习之路相 ...
缓冲区分析—ArcGIS API for JavaScript
缓冲区分析是地理信息系统中的空间分析基本功能之一,是众多空间分析方法的基础.缓冲区分析是指为了识别某地理实体或空间物体对其周围的邻近性或影响度而在其周围建立的一定宽度的带状区. 缓冲区介绍缓冲区分析 ...

ArcGIS API for JavaScript实现坐标定位

ArcGIS API for JavaScript实现坐标定位相关推荐

最新文章

热门文章