arcgis api for javascript 學習（五）實現地圖繪製工具

時間 2019-12-13

標籤 arcgis api javascript 學習實現地圖繪製工具欄目 JavaScript 简体版

原文原文鏈接

一、本文實現的功能爲鼠標與地圖之間的交互，可以在地圖上繪製不一樣形狀的圖形css

二、代碼部分主要講到的爲Graphic函數的相關功能html

<!DOCTYPE html>
<html>
<head>
    <title>地圖繪製工具</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.29/"></script>
    <style>
        #map{
            position:relative;
            height:400px;
            width:100%;
        }
    </style>
</head>
<body>


<div id="drawTool">
    <button id="multipoint" >繪製點</button>
    <button id="line">繪製折線</button>
    <button id="polygon">繪製面</button>
    <button id="circle">繪製圓</button>
    <button id="rectangle">繪製矩形</button>
    <button id="remove">清除所有圖形</button>
    <button id="disabledraw">關閉繪製工具</button>

</div>
<div id='map'>
</div>



<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'"
     style="background-color: #37a2ee">
    魚吃魚罐頭 @版權全部
</div>


<script>
    require([
                "esri/map",
                "dojo/on",
                "esri/dijit/Basemap",
                "esri/dijit/BasemapLayer",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/toolbars/draw",
                "esri/graphic",
                "dojo/colors",
                "dojo/domReady!"],
            function (
                    Map,
                    on,
                    Basemap,
                    BasemapLayer,
                    SimpleMarkerSymbol,
                    SimpleLineSymbol,
                    SimpleFillSymbol,
                    Draw,
                    Graphic,
                    Color) {
                var map = new Map("map", {
                    basemap: 'osm',
                    center: [122.127653, 36.009423]
                });
                //使用toolbar上的繪圖工具
                var toolBar = new Draw(map);

                //建立點要素
                var pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,new Color("#FFFCC"),12);
                //線要素
                lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([245, 0, 0]), 3);
                //面要素
                polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 245, 0, 0.25]));

                var drawTool = document.getElementById("drawTool");

                drawTool.onclick = function (evt) {
                    var ev = evt || window.event;
                    var target = ev.target || ev.srcElement;
                    if (target.nodeName.toLocaleLowerCase() == 'button') {
                        switch (target.id) {
                            case 'point':
                                toolBar.activate(Draw.POINT, {
                                    showTooltips: true
                                });
                                break;
                            case 'multipoint':
                                toolBar.activate(Draw.MULTI_POINT, {
                                    showTooltips: true
                                })
                                break;
                            case 'line':
                                toolBar.activate(Draw.POLYLINE, {
                                    showTooltips: true
                                })
                                break;
                            case 'polygon':
                                toolBar.activate(Draw.POLYGON, {
                                    showTooltips: true
                                })
                                break;
                            case 'circle':
                                toolBar.activate(Draw.CIRCLE, {
                                    showTooltips: true
                                })
                                break;
                            case 'rectangle':
                                toolBar.activate(Draw.RECTANGLE, {
                                    showTooltips: true
                                })
                                break;
                            case "remove":
                                map.graphics.clear();
                                break;
                            case 'disabledraw':
                                toolBar.deactivate();
                                break;
                        }
                    }
                }
                toolBar.on("draw-complete", drawEndEvent)
                function drawEndEvent(evt) {
                    //添加圖形到地圖
                    var symbol;
                    if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
                        symbol = pointSymbol;
                    } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {
                        symbol = lineSymbol;
                    }
                    else {
                        symbol = polygonSymbol;
                    }
                    map.graphics.add(new Graphic(evt.geometry, symbol))
                }
            });
</script>


</body>
</html>