ArcGIS API for JavaScript实现坐标定位

最新推荐文章于 2021-11-30 14:54:26 发布

idomyway

最新推荐文章于 2021-11-30 14:54:26 发布

阅读量7.7k

点赞数 2

分类专栏： ArcGIS JS 开发实例文章标签： javascript api arcgis 坐标定位

本文链接：https://blog.csdn.net/idomyway/article/details/77758285

版权

ArcGIS JS 开发实例专栏收录该内容

21 篇文章 4 订阅

订阅专栏

坐标定位是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>

idomyway

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
ArcGIS API for JavaScript实现坐标定位

坐标定位是gis系统中常用的功能效果图实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding: 0px;
复制链接

扫一扫