ArcGIS API For JavaScript - toolbar工具条（测距）、站点要素显隐、线网要素显隐

Myth丶恋晨 2021-07-25 13:10 529阅读 0赞 
  1. @{
  2.     Layout = null;
  3. }
  5. <!DOCTYPE html>
  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <title>Draw</title>
  11.     @*加载高德地图*@
  12.     <script type="text/javascript">
  13.         var dojoConfig = {
  14.             async: true,
  15.             parseOnLoad: true,
  16.             packages: [{
  17.                 name: "js",
  18.                 location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
  19.             }]
  20.         };
  21.     </script>
  22.     <script src="~/Scripts/jquery-3.3.1.js"></script>
  23.     <script src="~/Scripts/init.js"></script>
  24.     <link href="~/Content/esri.css" rel="stylesheet" />
  25.     <link href="~/Content/tundra.css" rel="stylesheet" />
  26.     <style>
  27.         * {
  28.             margin: 0;
  29.             padding: 0;
  30.         }
  32.         html, body, #map {
  33.             width: 100%;
  34.             height: 100%;
  35.             position: absolute;
  36.         }
  38.         .list {
  39.             width: 12%;
  40.             background-color: rgba(22, 59, 90, 0.8);
  41.             color: #fff;
  42.             position: absolute;
  43.         }
  45.         button {
  46.             width: 90%;
  47.             margin: 10px 5%;
  48.             border-radius: 5px;
  49.             height: 26px;
  50.         }
  51.     </style>
  52.     <script>
  53.         var map;
  54.         var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'//总图层
  55.         var stationUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/0'//站点图层
  56.         var lineUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/1'//线路图层
  57.         require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
  58.             "esri/toolbars/draw", "esri/symbols/Font", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "dojo/query", "esri/symbols/TextSymbol",
  59.             "esri/graphic", "esri/tasks/LengthsParameters", "esri/geometry/Polyline", "dojo/number", "esri/layers/FeatureLayer",
  60.             "dojo/domReady!"],
  61.             function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, GeometryService, BufferParameters,
  62.                 Draw, Font, SimpleMarkerSymbol, SimpleLineSymbol, Color, query, TextSymbol,
  63.                 Graphic, LengthsParameters, Polyline, number, FeatureLayer) {
  64.                 /* code goes here */
  65.                 map = new Map("map", {
  66.                     center: [120.075892, 31.526844],
  67.                     zoom: 8,//缩放等级
  68.                     logo: false, //logo
  69.                     slider: false, //缩小按钮
  70.                 });
  71.                 var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
  72.                 var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
  73.                 map.addLayer(baselayer1);//添加高德地图到map容器
  74.                 map.addLayer(serverLayer);
  77.                 //-------------toolbar工具条（测距、站点要素显隐、线网要素显隐）---------------
  78.                 var toolbar = new Draw(map);   //map：地图
  79.                 //调用esri自带的服务（在arcgis server Manger中，记得开启服务）
  80.                 var geometryService = new GeometryService("http://xxx:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
  81.                 var totleDistance = 0.0;//总距离
  82.                 var totalGraphic = null;//存储点集合
  83.                 var disFun = false;//距离测量
  84.                 var areaFun = false;//面积测量
  85.                 var inputPoints = [];//存储生成点的集合
  86.                 var startFont = new Font('12px').setWeight(Font.WEIGHT_BOLD);//定义文字样式
  87.                 var makerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 8,
  88.                     new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([204, 102, 51]), 1),
  89.                     new Color([158.184, 71, 0.65]));//定义标记点样式
  90.                 //给按钮添加绑定事件
  91.                 query("button").on("click", function (event) {
  92.                     console.log("111",event)
  93.                     //获得按钮的文本信息
  94.                     var value = this.innerHTML;
  95.                     switch (value) {
  96.                         case "测距":
  97.                             //测距操作
  98.                             map.graphics.clear();
  99.                             distanceMeasure();
  100.                             break;
  101.                         case "站点":
  102.                             //站点
  103.                             map.graphics.clear();
  104.                             Aurlstation();
  105.                             break;
  106.                         case "线网":
  107.                             //线网
  108.                             map.graphics.clear();
  109.                             Xurlline();
  110.                             break;
  111.                     }
  112.                 })
  113.                 //长度量算
  114.                 function distanceMeasure() {
  115.                     map.enableScrollWheelZoom();
  116.                     disFun = true;
  117.                     areaFun = false;
  118.                     toolbar.activate(Draw.POLYLINE);
  119.                 }
  120.                 // 量算功能触发
  121.                 map.on("click", function (evt) {
  122.                     mapClick(evt);
  123.                 });
  124.                 //触发完成的事件
  125.                 toolbar.on("draw-end", function (evt) {
  126.                     addToMap(evt); //添加图形函数;测距所点与点之间画的线
  127.                 });
  128.                 //生成两点之间的连线
  129.                 toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2));
  130.                 //量算函数
  131.                 function mapClick(evt) { //触发事件的方法
  132.                     if (disFun) {
  133.                         inputPoints.push(evt.mapPoint);
  134.                         var textSymbol;
  135.                         if (inputPoints.length === 1) {
  136.                             textSymbol = new TextSymbol("起点", startFont, new Color([204, 102, 51]));
  137.                             textSymbol.setOffset(0, -20);
  138.                             map.graphics.add(new Graphic(evt.mapPoint, textSymbol));
  139.                         }
  140.                         map.graphics.add(new Graphic(evt.mapPoint, makerSymbol));
  141.                         if (inputPoints.length >= 2) {
  142.                             //    设置距离测量的参数
  143.                             var lengthParams = new LengthsParameters();
  144.                             lengthParams.distanceUnit = GeometryService.UNIT_METER;
  145.                             lengthParams.calculationType = "preserveShape";
  146.                             var p1 = inputPoints[inputPoints.length - 2];
  147.                             var p2 = inputPoints[inputPoints.length - 1];
  148.                             if (p1.x === p2.x && p1.y === p2.y) {
  149.                                 return;
  150.                             }
  151.                             //    z在两点之间划线将两点链接起来
  152.                             var polyline = new Polyline(map.spatialReference);
  153.                             polyline.addPath([p1, p2]);
  154.                             lengthParams.polylines = [polyline];
  155.                             // 根据参数，动态的计算长度
  156.                             geometryService.lengths(lengthParams, function (distance) {
  157.                                 var _distance = number.format(distance.lengths[0] / 1000);
  158.                                 totleDistance += parseFloat(_distance);//计算总长度
  159.                                 var beetwentDistances = _distance + "千米";
  160.                                 var tdistance = new TextSymbol(beetwentDistances, startFont, new Color([204, 102, 51]));
  161.                                 tdistance.setOffset(40, -3);
  162.                                 map.graphics.add(new Graphic(p2, tdistance));
  163.                                 if (totalGraphic) {
  164.                                     map.graphics.remove(totalGraphic);
  165.                                 }
  166.                                 var total = number.format(totleDistance, {
  167.                                     pattern: "#.000"
  168.                                 });
  169.                                 //    设置总长度的显示样式，并添加到地图上
  170.                                 var totalSymbol = new TextSymbol("总长度：" + total + "千米", startFont, new Color([204, 102, 51]));
  171.                                 totalSymbol.setOffset(40, -15);
  172.                                 totalGraphic = map.graphics.add(new Graphic(p2, totalSymbol));
  173.                             });
  174.                         }
  175.                     }
  176.                 }
  177.                 // 添加图形函数
  178.                 function addToMap(evt) {  //上面触发的addToMap方法，触发完成的方法
  179.                     if (disFun || areaFun) {
  180.                         var geometry = evt.geometry;//绘制图形的geometry
  181.                         //将绘制的图形添加到地图上去
  182.                         var symbol = null;
  183.                         switch (geometry.type) {
  184.                             case "point"://点
  185.                                 symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
  186.                                     new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1),
  187.                                     new Color([0, 255, 0, 0.25]));
  188.                                 break;
  189.                             case "polyline"://线
  190.                                 symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
  191.                                     new Color([255, 0, 0, 0.8]), 2);
  192.                                 break;
  193.                             case "polygon"://多边形
  194.                                 symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
  195.                                     new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2),
  196.                                     new Color([255, 255, 0, 0.25]));
  197.                                 break;
  198.                             case "extent":  //矩形
  199.                                 symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
  200.                                     new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2),
  201.                                     new Color([255, 255, 0, 0.25]));
  202.                                 break;
  203.                         }
  204.                         map.graphics.add(new Graphic(geometry, symbol));
  206.                         toolbar.deactivate();
  208.                         if (disFun) {
  209.                             disFun = false;
  210.                             inputPoints.splice(0, inputPoints.length);//删除数组中的所有元素
  211.                             totleDistance = 0.0;
  212.                             totalGraphic = null;
  213.                         }
  215.                     }
  216.                 }
  217.                 //站点元素
  218.                 var Asta = false;
  219.                 function Aurlstation() {
  220.                     if (Asta) { //默认为显示
  221.                         map.removeLayer(map.getLayer("Fzd"));
  222.                         Asta = false;
  223.                     }
  224.                     else {
  225.                         var featureLayer = new FeatureLayer(stationUrl, {  //stationUrl：站点图层，不可错
  226.                             mode: FeatureLayer.MODE_SNAPSHOT,
  227.                             outFields: ["*"]
  228.                         });
  229.                         featureLayer.id = "Fzd";
  230.                         map.addLayers([featureLayer]);
  232.                         Asta = true;
  233.                     }
  234.                 }
  235.                 //线网元素
  236.                 var Xw = false;
  237.                 function Xurlline() {
  238.                     if (Xw) {
  239.                         map.removeLayer(map.getLayer("Fxw"));
  240.                         Xw = false;
  241.                     }
  242.                     else {
  243.                         var featureLayer = new FeatureLayer(lineUrl, {  //urlline：线路图层，不可错
  244.                             mode: FeatureLayer.MODE_SNAPSHOT,
  245.                             outFields: ["*"]
  246.                         });
  247.                         featureLayer.id = "Fxw";
  248.                         map.addLayers([featureLayer]);
  250.                         Xw = true;
  251.                     }
  252.                 }
  253.             });
  254.     </script>
  255. </head>
  256. <body>
  257.     <div id="map"></div>
  258.     <div class="list">
  259.         <button>测距</button>
  260.         <button>站点</button>
  261.         <button>线网</button>
  262.     </div>
  263. </body>
  264. </html>
  265. <script>
  268. </script>

发表评论

表情：
评论列表 （有 0 条评论，529人围观）

还没有评论，来说两句吧...

相关阅读