图形绘制

最新推荐文章于 2020-10-02 17:33:26 发布
NextStand
最新推荐文章于 2020-10-02 17:33:26 发布
阅读量459
点赞数 1
分类专栏： ArcGis for JavaScript 文章标签： ArcGis 地图图形
本文链接：https://blog.youkuaiyun.com/NextStand/article/details/53116271
版权
ArcGis for JavaScript 专栏收录该内容
2 篇文章
订阅专栏
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/tundra/tundra.css" rel="stylesheet" />
    <link href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css" rel="stylesheet" />
    <link href="css/mystyle.css" rel="stylesheet" />
    <script src="http://localhost/arcgis_js_api/library/3.3/jsapi/init.js"></script>
    <script src="js/jsapi_vsdoc12_v38.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
    <div class="Map" id="Map">

    </div>
    <div class="btngroup">
        <button onclick="toolbars.activate(esri.toolbars.Draw.POINT)">点</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.MULTI_POINT)">多点</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.LINE)">直线</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.POLYLINE)">折线</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.POLYGON)">多边形</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.FREEHAND_POLYLINE)">手绘折线</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.FREEHAND_POLYGON)">手绘多边形</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.ARROW)">箭头</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.TRIANGLE)">三角形</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.CIRCLE)">圆形</button>
        <button onclick="toolbars.activate(esri.toolbars.Draw.ELLIPSE)">椭圆</button>
 </div>
</body>
<script>
    dojo.require("esri.map");
    dojo.require("esri.toolbars.draw");
    var map, toolbars,symbol;
    var init = function () {
        map = new esri.Map("Map", {
            logo: false,
            zoom: 12,
            center: [104.06, 30.67],
            sliderStyle:"large"
        });
        var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
        map.addLayer(layer);
        toolbars = new esri.toolbars.Draw(map);
        toolbars.onDrawEnd = drawit;
    }
    function drawit(geometry) {
        toolbars.deactivate();
        switch (geometry.type) {
            case "point": {
                symbol = new esri.symbol.SimpleMarkerSymbol(
                    esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,
                    30,
                    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([255,0,0]),1),
                    new dojo.Color([255, 255, 0, 0.25]))
                break;
            }
            case "polyline": {
                symbol = new esri.symbol.SimpleLineSymbol(
                    esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                    new dojo.Color([255, 0, 0]),
                    3);
                break;
            }
            case "polygon": {
                var symbol = new esri.symbol.SimpleFillSymbol(
                        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                        new esri.symbol.SimpleLineSymbol(
                            esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
                            new dojo.Color([255, 0, 0]),
                            2
                        ),
                        new dojo.Color([255, 255, 0, 0.25])
                    );
                break;
            }
            case "extent": {
                var symbol = new esri.symbol.SimpleFillSymbol(
                        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                        new esri.symbol.SimpleLineSymbol(
                            esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
                            new dojo.Color([255, 0, 0]),
                            2
                        ),
                        new dojo.Color([255, 255, 0, 0.25])
                    );
                break;
            }
            case "multipoint": {
                var symbol = new esri.symbol.SimpleMarkerSymbol(
                        esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND,
                        20,
                        new esri.symbol.SimpleLineSymbol(
                            esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                            new dojo.Color([255, 0, 0]),
                            1
                        ),
                        new dojo.Color([255, 0, 0, 0.5])
                    );
                break;
            }
        }
        var graphic = new esri.Graphic(geometry, symbol);
        map.graphics.add(graphic);
    }
    dojo.addOnLoad(init);
</script>
</html>
这里写图片描述