编程语言
首页 > 编程语言> > WEBGIS ,ARCGIS JAVASCRIPT的基本操作

WEBGIS ,ARCGIS JAVASCRIPT的基本操作

作者:互联网

转载来自:https://blog.csdn.net/kangkang_style/article/details/75601974

<!DOCTYPE html>
<html>
  <head>
    <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>Landuse</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
    
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow:hidden;
        position: absolute;
      }
     
      #map {
        padding:1px;
        border:solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
        float: left;
        height: 100%;
        width: 80%;
      }
     
      #templatePicker {
        border: solid 2px #444;
        float: right;
        height: 100%;
        width: auto;
      }
    </style>

  <script src="https://js.arcgis.com/3.21/"></script>
    <script>
    var map;
    var dynamicUrl="http://localhost:6080/arcgis/rest/services/MyMapService/MapServer";
    var pointUrl="http://localhost:6080/arcgis/rest/services/MyMapService/FeatureServer/0";
    var lineUrl="http://localhost:6080/arcgis/rest/services/MyMapService/FeatureServer/1";
    var polygonUrl="http://localhost:6080/arcgis/rest/services/MyMapService/FeatureServer/2";
    var graValues=[];
    var geoValues=[];
    var graphicResult=[];
    var attrbu;
    var lineSymbol;
    require([
        "esri/map",
        "esri/toolbars/draw",
        "esri/toolbars/edit",
        "esri/graphic",

        "esri/layers/FeatureLayer",
        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/renderers/SimpleRenderer",
        "esri/Color",
        
        "esri/layers/TableDataSource",
        "esri/layers/LayerDataSource",

        "esri/dijit/editing/TemplatePicker",

        "dojo/_base/array",
        "dojo/_base/event",
        "dojo/_base/lang",
        "dojo/parser",
        "dojo/on",
        "dojo/dom",
        "dojo/query",

        "dojo/domReady!"
      ], function(
        Map,
        Draw,
        Edit,
        Graphic,
        FeatureLayer,
        ArcGISDynamicMapServiceLayer,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        SimpleFillSymbol,
        SimpleRenderer,
        Color,
        TableDataSource,
        LayerDataSource,
        TemplatePicker,
        arrayUtils,
        event,
        lang,
        parser,
        on,
        dom,
        query
      ){
        parser.parse();
        
        //加载地图
        map = new Map("map");
        var dynamicLayer=new ArcGISDynamicMapServiceLayer(dynamicUrl);
        //清缓存
        dynamicLayer.setDisableClientCaching(true);
        map.addLayer(dynamicLayer);
        
        //图层加载,绑定监听
        map.on("layers-add-result", initEditing);

        var pointLayer = new FeatureLayer(pointUrl ,{
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        var lineLayer = new FeatureLayer(lineUrl, {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        var polygonLayer = new FeatureLayer(polygonUrl, {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });

        map.addLayers([pointLayer,lineLayer,polygonLayer]);


        function initEditing(evt) {
          //当前图层
          var currentLayer = null;
          //dojo/array.map();获取当前添加图层--此处为图层数组
          var layers = arrayUtils.map(evt.layers, function(result) {
            return result.layer;
          });
         
          //编辑工具
          var editToolbar = new Edit(map,{
              showToolTips:true
          });
          //编辑监听编辑结束事件
          editToolbar.on("deactivate", function(evt) {
            currentLayer.applyEdits(null, [evt.graphic], null);
          });
            
          //dojo/array.forEach()遍历数组中每个图层
          arrayUtils.forEach(layers, function(dynamicLayer) {
              
        //第一部分
              //可编辑状态--默认值为false
            var editingEnabled = false;
            //底图添加双击监听
            dynamicLayer.on("dbl-click", function(evt) {
              //双击事件拦截--防止放大事件触发
              event.stop(evt);
              //第一次双击进入可编辑状态,第二次双击关闭编辑状态
              if (editingEnabled === false) {
                editingEnabled = true;
                editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
              } else {
                currentLayer = this;
                editToolbar.deactivate();
                editingEnabled = false;
              }
            });

        //第二部分
            //底图监听单击事件
            dynamicLayer.on("click", function(evt) {
              //拦截单击事件,判断是否为删除操作
              event.stop(evt);
              //ctrl or cmd 配合单击事件完成删除操作
              if (evt.ctrlKey === true || evt.metaKey === true) {
                dynamicLayer.applyEdits(null,null,[evt.graphic]);
                currentLayer = this;
                editToolbar.deactivate();
                editingEnabled=false;
              }
            });
          });

        //模板选择器
        var templatePicker = new TemplatePicker({
            //属性设置
            featureLayers: layers,
            rows: "auto",
            columns: 2,
            grouping: true,
            style: "height: auto; overflow: auto;"
          }, "templatePickerDiv");
        //开启模板
        templatePicker.startup();
        
        //画图工具
        var drawToolbar = new Draw(map,{
            showToolTips:true
        });
        
        //从模板选择器获取选择模板
        var selectedTemplate;
        
        templatePicker.on("selection-change", function() {
            //监听模板选择改变
            if( templatePicker.getSelected() ) {
              selectedTemplate = templatePicker.getSelected();
            }
            
              //判断模板操作类型
            switch (selectedTemplate.featureLayer.geometryType) {
              case "esriGeometryPoint":
                drawToolbar.activate(Draw.POINT);
                break;
              case "esriGeometryPolyline":
                drawToolbar.activate(Draw.POLYLINE);
                break;
              case "esriGeometryPolygon":
                drawToolbar.activate(Draw.POLYGON);
                break;
            }
          });
        
        //监听作图完成事件
        drawToolbar.on("draw-end", function(evt) {
            drawToolbar.deactivate();
            editToolbar.deactivate();
            var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
               attrbu=newAttributes;
            var newGraphic = new Graphic(evt.geometry, null, newAttributes);
            selectedTemplate.featureLayer.applyEdits([newGraphic],null,null);
          });
        }
        
        
    //添加shape--featureLayer
        on(dom.byId("added"),"click",function(e){
            //定义一个数据源
            var dataSource = new TableDataSource();
            //此处为我们设置的命名空间
            dataSource.workspaceId = "test";
            //命名空间下面的shp
            dataSource.dataSourceName = "经纬网.shp";
            //定义一个图层数据源
            var layerSource = new LayerDataSource();
            //给图层数据源赋值
            layerSource.dataSource = dataSource;
            //定义一个要素图层:注意链接为动态图层的地址
            var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/dynamicLayer", {
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"],
                source: layerSource
            });
            //定义线符号
            lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
            //定义渲染器
            var renderer = new esri.renderer.SimpleRenderer(lineSymbol);
               //定义渲染器
            layer2.setRenderer(renderer);
            layer2.refresh();
            layer2.id="layer2";
            map.addLayer(layer2);
            alert(graValues.length);
            graValues=map.getLayer("layer2").graphics;
            alert(graValues.length);
               });
        
       
        on(dom.byId("sub"),"click",function(){
            
            if(graValues.length>0){
                
                for(var i=0;i<graValues.length;i++){
                    var gra=new Graphic(graValues[i].geometry,lineSymbol,attrbu);
                    graphicResult.push(gra);
                }
                
                lineLayer.applyEdits(graphicResult,null,null);
                
            }else{
                alert("sorry,graValues is null")
            }
        });
        
        
      });
    </script>
  </head>
  <body class="claro">
      <input id="added" type="button" value="add_shape" />
      <input id="sub" type="button" value="submit" />
      <div id="map"></div>
    <div id="templatePickerDiv"></div>
    
  </body>
</html>

————————————————
版权声明:本文为CSDN博主「kangkang_style」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/kangkang_style/article/details/75601974

 

标签:map,dojo,WEBGIS,ARCGIS,new,var,基本操作,evt,esri
来源: https://www.cnblogs.com/baimy/p/14690222.html