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

最新推荐文章于 2022-11-08 15:47:16 发布

风轻轻~

最新推荐文章于 2022-11-08 15:47:16 发布

阅读量764

点赞数

本文链接：https://blog.csdn.net/Jie_1997/article/details/106810133

版权

地图__ArcGIS Api For JS 专栏收录该内容

19 篇文章 5 订阅

订阅专栏

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>交通绘制（线、面、圆）</title>
    @*加载高德地图*@
    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            parseOnLoad: true,
            packages: [{
                name: "js",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
            }]
        };
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    @*引入arcgis所需js及css*@
    <script src="~/util/MapFile/init.js"></script>
    <link href="~/util/MapFile/esri.css" rel="stylesheet" />
    <link href="~/util/MapFile/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/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/MapServer'
        var stationUrl = 'http://xxx:6080/arcgis/rest/services/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/MapServer/0'
        var lineUrl = 'http://xxx:6080/arcgis/rest/services/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/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 baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                map.addLayer(baselayer1);//添加高德地图到map容器
                var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
                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;
    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]));

        //创建几何服务(arcgis server地址)
        gsvc = new esri.tasks.GeometryService("http://xxx:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
        //findRoadsInExtent  多种绘制方法时，方法名称不可重复
        dojo.connect(tb, "onDrawEnd", findRoadsInExtent);
        //开始绘制
        //POLYGON：面,POLYLINE:线，CIRCLE：圆
        tb.activate(esri.toolbars.Draw.POLYGON);

    }

    function findRoadsInExtent(extent) {
        //投影坐标系（3857）转地理坐标系（4326）
        var geometry = esri.geometry.webMercatorToGeographic(extent);
        //绘制线图层样式
        var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 99, 0]), 3);
        //绘制面图层样式
        var polygonSymbo = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, lineSymbol, new dojo.Color([0, 67, 0, 0.25]));
        //绘制完成的新图形（参数：geometry图形，polygonSymbo几何图形的样式）
        var graphicpoint = new esri.Graphic(geometry, polygonSymbo);
        //展现新图形
        map.graphics.add(graphicpoint);
        //计算面积(平方公里)
        var areas = esri.geometry.geodesicAreas([geometry], esri.Units.SQUARE_KILOMETERS);
        console.log(areas)
        //结束绘制图形（不关闭可连续画图）
        tb.deactivate();
    }
</script>

风轻轻~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API For JavaScript - 交通绘制（线、面、圆）

@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Draw</title> @*加载高德地图*@ <script type="text/javascript"> var dojoConfig =
复制链接

扫一扫