坐标定位是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); }); //清空graphics function 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>