基础功能---交互画图1

最新推荐文章于 2021-05-12 20:11:04 发布

Devin·Finn

最新推荐文章于 2021-05-12 20:11:04 发布

阅读量376

点赞数

分类专栏： WebGIS - ArcGIS API For Js

本文链接：https://blog.csdn.net/DanBo_C/article/details/99105123

版权

WebGIS - ArcGIS API For Js 专栏收录该内容

53 篇文章 18 订阅

订阅专栏

1.效果图

2.引入模块

					"esri/toolbars/draw",
                    "esri/graphic",
                    "esri/symbols/SimpleLineSymbol",
                    "esri/symbols/SimpleMarkerSymbol",
                    "esri/symbols/SimpleFillSymbol",

3.像是绑定小部件的进阶版

都是使用switch选择合适的操作方法

		query("button").on("click",function(event){
			var value=this.innerHTML;
			switch(value){
                case "绘制点":{
                    toolbar.activate(Draw.POINT, {
                        showTooltips:true
                    })
                    break;

                }
                case "绘制折线":{
                    toolbar.activate(Draw.POLYLINE, {
                        showTooltips:true
                    })
                    break;
                }
                case "绘制面":{
                    toolbar.activate(Draw.POLYGON, {
                        showTooltips:true
                    })
                    break;
                }
                case "徒手线":{
                    toolbar.activate(Draw.FREEHAND_POLYLINE, {
                        showTooltips:true
                    })
                    break;
                }
                case "徒手面":{
                    toolbar.activate(Draw.FREEHAND_POLYGON, {
                        showTooltips:true
                    })
                    break;
                }

			}
		   });

具有改进的是，引入on模块，toolbar通过switch决定各自操作方法（这里还不是太明白@@@标记）

			on(toolbar,"draw-complete", function (result) {
                var geometry=result.geometry;
                var type=geometry.type;
                var graphic;
                switch (type) {
                    case "point":
                        graphic= new Graphic(geometry, marker);
                        break;
                    case "polyline":
                        graphic= new Graphic(geometry, lineSymbol);
                        break;
                    case "polygon":
                        graphic= new Graphic(geometry, fill);
                        break;
                }

                map.graphics.add(graphic);
                toolbar.deactivate();
            });

4.贴代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>WebGIS</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/tundra/tundra.css"/>
    <script  type="text/Javascript" src="https://js.arcgis.com/3.28/"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:800px;
            border:1px solid #000;
        }
    </style>
    <script type="text/javascript">

        require(["esri/map","dojo/dom","dojo/on",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "dojo/query",
                    "esri/toolbars/draw",
                    "esri/graphic",
                    "esri/symbols/SimpleLineSymbol",
                    "esri/symbols/SimpleMarkerSymbol",
                    "esri/symbols/SimpleFillSymbol",
                    "dojo/domReady!"],
            function (Map,dom,on, ArcGISDynamicMapServiceLayer,query, Draw, SimpleLineSymbol,Graphic,SimpleMarkerSymbol,SimpleFillSymbol) {
            var map = new esri.Map("MyMapDiv");
            var layer = new ArcGISDynamicMapServiceLayer
            ("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
            map.addLayer(layer)
            var toolbar = new Draw(map, { showTooltips: true });

            var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
            var marker= new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new dojo.Color([255, 0, 0]));
            var fill= new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,  new dojo.Color([255, 0, 0]));
            on(toolbar,"draw-complete", function (result) {
                var geometry=result.geometry;
                var type=geometry.type;
                var graphic;
                switch (type) {
                    case "point":
                        graphic= new Graphic(geometry, marker);
                        break;
                    case "polyline":
                        graphic= new Graphic(geometry, lineSymbol);
                        break;
                    case "polygon":
                        graphic= new Graphic(geometry, fill);
                        break;
                }

                map.graphics.add(graphic);
                toolbar.deactivate();
            });
           query("button").on("click",function(event){
			var value=this.innerHTML;
			switch(value){
                case "绘制点":{
                    toolbar.activate(Draw.POINT, {
                        showTooltips:true
                    })
                    break;

                }
                case "绘制折线":{
                    toolbar.activate(Draw.POLYLINE, {
                        showTooltips:true
                    })
                    break;
                }
                case "绘制面":{
                    toolbar.activate(Draw.POLYGON, {
                        showTooltips:true
                    })
                    break;
                }
                case "徒手线":{
                    toolbar.activate(Draw.FREEHAND_POLYLINE, {
                        showTooltips:true
                    })
                    break;
                }
                case "徒手面":{
                    toolbar.activate(Draw.FREEHAND_POLYGON, {
                        showTooltips:true
                    })
                    break;
                }

			}
		   });
        });


    </script>
</head>
<body>
    <div id="MyMapDiv" class="MapClass"></div>
    <button>绘制点</button>
	<button>绘制折线</button>
	<button>绘制面</button>
	<button>徒手线</button>
	<button>徒手面</button>
</body>
</html>