ArcGIS API for JavaScript 实现point multipoint line polyline cirle等graphics的绘制

最新推荐文章于 2024-04-26 15:41:32 发布

idomyway

最新推荐文章于 2024-04-26 15:41:32 发布

阅读量3k

点赞数

分类专栏： ArcGIS JS 开发实例文章标签： javascript arcgis webgis

本文链接：https://blog.csdn.net/idomyway/article/details/78228557

版权

ArcGIS JS 开发实例专栏收录该内容

21 篇文章 4 订阅

订阅专栏

需求

在网页中画graphics是webGIS的基础操作，也是一些webGIS操作的基础。画graphics一般是用到的是esri/toolbars/draw 实现的，通过对官网的实例改进。

效果截图

这里写图片描述

源代码

<!DOCTYPE html>
<html>
<head>
    <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>Shapes and Symbols</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
    <style>
        #info {
            top: 20px;
            color: #444;
            height: auto;
            font-family: arial;
            right: 20px;
            margin: 5px;
            padding: 10px;
            position: absolute;
            width: 115px;
            z-index: 40;
            border: solid 2px #666;
            border-radius: 4px;
            background-color: #fff;
        }
        html, body, #mapDiv {
            padding:0;
            margin:0;
            height:100%;
        }
        button {
            width: 100%;
            margin-bottom: 5px;
            display: block;
        }
    </style>
    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
        var map, tb;
        require([
            "esri/map",
            "esri/toolbars/draw",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/PictureFillSymbol",
            "esri/symbols/CartographicLineSymbol",
            "esri/graphic",
            "esri/Color",
            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
        ], function(
            Map, Draw,
            SimpleMarkerSymbol, SimpleLineSymbol,
            PictureFillSymbol, CartographicLineSymbol,
            Graphic,
            Color, dom, on
        ) {
            map = new Map("mapDiv", {
                basemap: "streets",
                center: [-25.312, 34.307],
                zoom: 3
            });
            map.on("load", initToolbar);

            // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
            var markerSymbol = new SimpleMarkerSymbol();
            markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
            markerSymbol.setColor(new Color("#00FFFF"));

            // lineSymbol used for freehand polyline, polyline and line.
            var lineSymbol = new CartographicLineSymbol(
                CartographicLineSymbol.STYLE_SOLID,
                new Color([255,0,0]), 10,
                CartographicLineSymbol.CAP_ROUND,
                CartographicLineSymbol.JOIN_MITER, 5
            );
            // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
            // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
            var fillSymbol = new PictureFillSymbol("images/mangrove.png", new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color('#000'), 1), 42, 42);

            function initToolbar() {
                tb = new Draw(map);
                tb.on("draw-end", addGraphic);
                on(dom.byId("info"), "click", function(evt) {
                    if ( evt.target.id === "info" ) {
                        return;
                    }
                    var tool = evt.target.id.toLowerCase();
                    map.disableMapNavigation();
                    tb.activate(tool);
                });
            }
            function addGraphic(evt) {
                //deactivate the toolbar and clear existing graphics
                tb.deactivate();
                map.enableMapNavigation();
                // figure out which symbol to use
                var symbol;
                if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
                    symbol = markerSymbol;
                } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
                    symbol = lineSymbol;
                }
                else {
                    symbol = fillSymbol;
                }
                map.graphics.add(new Graphic(evt.geometry, symbol));
            }
        });
    </script>
</head>

<body>

<div id="info">
    <div>Select a shape then draw on map to add graphic</div>
    <button id="Point">Point</button>
    <button id="Multipoint">Multipoint</button>
    <button id="Line">Line</button>
    <button id="Polyline">Polyline</button>
    <button id="FreehandPolyline">Freehand Polyline</button>
    <button id="Triangle">Triangle</button>
    <button id="Extent">Rectangle</button>
    <button id="Circle">Circle</button>
    <button id="Ellipse">Ellipse</button>
    <button id="Polygon">Polygon</button>
    <button id="FreehandPolygon">Freehand Polygon</button>
</div>
<div id="mapDiv"></div>
</body>
</html>

idomyway

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API for JavaScript 实现point multipoint line polyline cirle等graphics的绘制

需求在网页中画graphics是webGIS的基础操作，也是一些webGIS操作的基础。画graphics一般是用到的是esri/toolbars/draw 实现的，通过对官网的实例改进。效果截图源代码<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8
复制链接

扫一扫