ArcGIS API For JavaScript - 交通绘制（线、面、圆）

灰太狼 2021-07-25 19:05 363阅读 0赞

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Draw</title>
        @*加载高德地图*@
        <script type="text/javascript">
            var dojoConfig = {
                async: true,
                parseOnLoad: true,
                packages: [{
                    name: "js",
                    location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
                }]
            };
        </script>
        <script src="~/Scripts/jquery-3.3.1.js"></script>
        <script src="~/Scripts/init.js"></script>
        <link href="~/Content/esri.css" rel="stylesheet" />
        <link href="~/Content/tundra.css" rel="stylesheet" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body, #map {
                width: 100%;
                height: 100%;
                position: absolute;
            }
    
            .list {
                width: 12%;
                background-color: rgba(22, 59, 90, 0.8);
                color: #fff;
                position: absolute;
            }
    
            button {
                width: 90%;
                margin: 10px 5%;
                border-radius: 5px;
                height: 26px;
            }
        </style>
        <script>
            var map;
            var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'
            var stationUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/0'
            var lineUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/1'
            require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
                "esri/toolbars/draw","dojo/domReady!"],
                function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer,
                    GeometryService, BufferParameters, Draw) {
                    /* code goes here */
                    map = new Map("map", {
                        center: [120.075892, 31.526844],
                        zoom: 8,//缩放等级
                        logo: false, //logo
                        slider: false, //缩小按钮
                    });
                    var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
                    var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                    map.addLayer(baselayer1);//添加高德地图到map容器
                    map.addLayer(serverLayer);
    
                });
        </script>
    </head>
    <body>
        <div id="map"></div>
        <div class="list">
            <button id="road" onclick="Roadinit();" style="width:205px">绘制</button>
        </div>
    </body>
    </html>
    <script>
        var tb;
        //执行button按钮Roadinit点击事件
        function Roadinit() {
            //清空上一次高亮显示
            map.graphics.clear();
            //第一步：创建一个新的Draw对象
            tb = new esri.toolbars.Draw(map);
            //设置样式
            RoaddefaultSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255]));
            RoadhighlightSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([255, 0, 0]));
            //图层
            var RoadqueryTask = new esri.tasks.QueryTask(lineUrl);
            var Roadquery = new esri.tasks.Query();
            //条件查询
            Roadquery.where = ("OBJECTID < 20000");
            Roadquery.returnGeometry = true;
            Roadquery.outFields = ["*"];
            //执行
            RoadqueryTask.execute(Roadquery, addRoadsToDraw);
    
        }
        //将站点加载到地图上
        function addRoadsToDraw(featureSet) {  //featureSet：查找到的结果
            //console.log(featureSet)
            //清空上一次高亮显示
            map.graphics.clear();
            var features = featureSet.features;
            for (var i = 0, il = features.length; i < il; i++) {
                //map.graphics.add(features[i].setInfoTemplate(RoadresultTemplate));
                map.graphics.add(features[i]);
            }
    
            //创建几何服务(arcgis server地址)
            gsvc = new esri.tasks.GeometryService("http://xxx:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
            //findRoadsInExtent0  多种绘制方法时，方法名称不可重复
            dojo.connect(tb, "onDrawEnd", findRoadsInExtent0);
            //开始绘制
            //POLYGON：面,POLYLINE:线，CIRCLE：圆
            tb.activate(esri.toolbars.Draw.POLYGON);
        }
    
        //面积
        var areas = 0; //面积
        function findRoadsInExtent0(extent) {
            //投影坐标系（3857）转地理坐标系（4326）
            var geometry = esri.geometry.webMercatorToGeographic(extent);
            //var geometry = extent;
            //绘制图形时 线的样式 颜色 宽度
            var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 99, 0]), 3);
            //绘制图形时 面的样式 轮廓 颜色
            var polygonSymbol2 = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, lineSymbol, new dojo.Color([0, 67, 0, 0.25]));
            //绘制完成的新图形（参数：geometry图形，polygonSymbol2几何图形的样式）
            var graphicpoint = new esri.Graphic(geometry, polygonSymbol2);
            //展现新图形
            map.graphics.add(graphicpoint);
    
            //计算面积(平方公里)
            areas = esri.geometry.geodesicAreas([geometry], esri.Units.SQUARE_KILOMETERS);
            console.log(areas)
            //结束绘制图形（不关闭可连续画图）
            tb.deactivate();
        }
    </script>