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

最新推荐文章于 2022-05-30 23:13:11 发布
最新推荐文章于 2022-05-30 23:13:11 发布
阅读量226 收藏
点赞数
分类专栏： WebGIS - ArcGIS API For Js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DanBo_C/article/details/105366923
版权
基础画图1
效果图

代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.31/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.31/esri/css/esri.css" />
    <script src="https://js.arcgis.com/3.31/"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style>
        /* 指定样式 */
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body class="claro">
    <div id="map"></div>
    <div style="position: absolute; top: 60px; left: 100px; width: 800px;">
        <button type="button" class="btn btn-default">简单点</button>
        <button type="button" class="btn btn-default">图片点</button>
        <button type="button" class="btn btn-default">基本线</button>
        <button type="button" class="btn btn-default">箭头线</button>
        <button type="button" class="btn btn-default">面样式1</button>
        <button type="button" class="btn btn-default">面样式2</button>

        <button type="button" class="btn btn-default">绘制多点</button>
        <button type="button" class="btn btn-default">自由线</button>
        <button type="button" class="btn btn-default">自由面</button>
        <button type="button" class="btn btn-default">圆</button>
        <button type="button" class="btn btn-default">矩形</button>

    </div>

    <script>
        require([
            "esri/map",
            "dojo/dom", "dojo/on",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/graphic",
            "esri/Color",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/renderers/SimpleRenderer",
            "dojo/query",
            "esri/toolbars/draw",
            "esri/SpatialReference",
            "dojo/domReady!"
        ], function (
            Map, dom, on, ArcGISDynamicMapServiceLayer, Point, Polyline, Graphic,
            Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, PictureMarkerSymbol, SimpleRenderer, query, Draw, SpatialReference
        ) {
            const map = new Map("map", {
                center: [108.934518, 34.35333],
                zoom: 7,
                logo: false,
                basemap: "oceans"
            });
            var markerSym = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                    new Color([87, 181, 74]), 1),
                new Color([255, 0, 0, 0.5]));;
            map.on("load", () => {
                var toolbar = new Draw(map, { showTooltips: true });
                // 标记 基本和自定义样式
                var smpPoint = true;
                var smpLine = true;
                var smpPloy = true;
                
                query("button").on("click", function (event) {
                    var value = this.innerHTML;
                    switch (value) {
                        case "简单点": {
                            toolbar.activate(Draw.POINT, {
                                showTooltips: true
                            })
                            smpPoint = true;
                            break;
                        }
                        case "图片点": {
                            toolbar.activate(Draw.POINT, {
                                showTooltips: true
                            })
                            smpPoint = false;
                            break;
                        }
                        case "基本线": {
                            toolbar.activate(Draw.POLYLINE, {
                                showTooltips: true
                            })
                            smpLine = true;
                            break;
                        }
                        case "箭头线": {
                            toolbar.activate(Draw.POLYLINE, {
                                showTooltips: true
                            })
                            smpLine = false;
                            break;
                        }
                        case "面样式1": {
                            toolbar.activate(Draw.POLYGON, {
                                showTooltips: true
                            })
                            smpPloy = true
                            break;
                        }
                        case "面样式2": {
                            toolbar.activate(Draw.POLYGON, {
                                showTooltips: true
                            })
                            smpPloy = false
                            break;
                        }
                        case "绘制多点": {
                            toolbar.activate(Draw.MULTI_POINT, {
                                showTooltips: true
                            })
                            break;
                        }
                        case "自由线": {
                            toolbar.activate(Draw.FREEHAND_POLYLINE, {
                                showTooltips: true
                            })
                            break;
                        }
                        case "自由面": {
                            toolbar.activate(Draw.FREEHAND_POLYGON, {
                                showTooltips: true
                            })
                            break;
                        }
                        case "圆": {
                            toolbar.activate(Draw.CIRCLE, {
                                showTooltips: true
                            })
                            break;
                        }
                        case "矩形": {
                            toolbar.activate(Draw.RECTANGLE, {
                                showTooltips: true
                            })
                            break;
                        }

                    }

                    var lineSymbol1 = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([0, 25, 0]), 1);
                    var lineSymbol2 = new SimpleLineSymbol(SimpleLineSymbol.STYLE_LONGDASHDOT, new Color([225, 0, 0]), 1);

                    var outLineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOTDOT, new Color([235, 235, 5]), 3);
                    var outLineSymbol2 = new SimpleLineSymbol(SimpleLineSymbol.STYLE_LONGDASH, new Color([235, 235, 5]), 3);

                    var marker = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, lineSymbol1, new Color([215, 224, 203]));
                    // var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_VERTICAL, lineSymbol1, new Color([235, 235, 5]));
                    var fill1 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outLineSymbol, new Color([48, 190, 144, 0.5]));
                    var fill2 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_DIAGONAL_CROSS, lineSymbol1, new Color([48, 190, 144]));

                    var pictureMarkerSymbol = new PictureMarkerSymbol('https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico', 20, 20);

                    lineSymbol2.setMarker({
                        style: "arrow",
                        placement: "end",
                    });

                    on(toolbar, "draw-complete", function (result) {
                        var geometry = result.geometry;
                        var type = geometry.type;
                        var graphic;
                        switch (type) {
                            case "point":
                                if (smpPoint)
                                    graphic = new Graphic(geometry, marker);

                                else
                                    graphic = new Graphic(geometry, pictureMarkerSymbol);
                                break;
                            case "polyline":
                                if (smpLine)
                                    graphic = new Graphic(geometry, lineSymbol1);

                                else
                                    graphic = new Graphic(geometry, lineSymbol2);
                                break;
                            case "polygon":
                                if (smpPloy)
                                    graphic = new Graphic(geometry, fill1);
                                else
                                    graphic = new Graphic(geometry, fill2);
                                // graphic = new Graphic(geometry, fill);
                                break;
                            case "multipoint":
                                graphic = new Graphic(geometry, marker);
                                break;
                        }
                        console.log(map.graphics.renderer)
                        map.graphics.add(graphic);
                        toolbar.deactivate();
                    });

                })
            })
        })


    </script>

</body>

</html>
Devin·Finn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基础功能---交互画图1
DanBo_C的博客
08-10 358
1.效果图 2.引入模块 "esri/toolbars/draw", "esri/graphic", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", ...
UML之交互图（序列图和协作图）
醉挽~清风
01-19 2262
交互图：交互图用来描述系统中的对象是如何进行相互作用的。即一组对象是如何进行消息传递的。 当对交互建模时，通常既包括对象 （每个对象都扮演者某一特定的角色），又包括消息（每个消息都代表对象之间的通信活动，并导致一定的动作发生） 交互图的描述： - 强调消息的时间顺序 - 强调发送和接收消息的对象的结构组织 交互图包括： -顺序图/序列图（sequence diagrams）：强调消息的时间顺序 -...
软件工程 第五章：交互图
budding0828
01-19 1万+
第五章：交互图 概述 动态模型用来描述系统的动态行为，分为状态模型和交互模型。 交互图描述对象间的动态合作关系及合作过程中的行为次序。常用来描述一个用例的行为，显示该用例中所涉及的对象及它们间的消息传递情况。 交互图有序列图和协作图两种形式。 序列图主要用来描述对象之间信息交换时的时间顺序. 协作图则用来描述系统对象之间如何协作共同完成系统功能的要求。 它们在语义上是等价的。这意味着序列图和协同...
UML——交互图（ 时序图和协作图）
Circ
05-12 5768
文章目录时序图什么是时序图时序图的组成对象生命线消息符号示例协作图什么是协作图？协作图的组成 时序图 什么是时序图 时序图（Sequence Diagram）描述了对象之间传递消息的时间顺序, 用来表示用例中的行为顺序, 是强调消息时间顺序的交互图; 。 时序图的组成 对象 生命线 消息符号 1、对象间绘制消息 2、 对象间过程调用 3、 对象间的异步消息：消息发送者发送消息后，持续自己的活动，等接受到消息接收者的反馈后再做处理（有反馈） 4、 过程调用中的返回消息 5、 自关联：自己给自己传递消息，自
ArcgisRuntime 之 在Graphics的图层中渲染点线面
qq_36196748的博客
06-05 806
也不知道啥时候总结的 在Graphics的图层中渲染点线面可以用多种symbol（符号） 比如点符号（MarkerSymbol）有三种，分别是： PictureMarkerSymbol(图片点符号) SimpleMarkerSymbol(简单点符号)，其中有包括Circle,Cross,Diamond,Square,Triangle,x TextSymbol(文本符号) 可以直接加到渲染里，Gra...
电子-stm32画图.zip
09-05
STM32在开发过程中，图形界面可以用于人机交互，例如通过LCD显示信息，或者创建触摸屏应用。这可能包括使用特定库如STM32CubeMX进行初始化配置，使用HAL库进行编程，以及利用图形库如ChibiOS/RT的GFX子系统或STM32...
python画图-JavaWeb-ma开发
06-03
2. **基础绘图**：掌握Matplotlib的基本用法，如设置图表大小、颜色、轴标签等。 3. **高级图表**：学习Seaborn的高级图表，如热力图、 violin plots和分布图。 4. **交互式图表**：理解Plotly和Bokeh的工作原理，...
java大作业--画图板
04-25
在本项目"java大作业--画图板"中，我们主要关注的是利用Java编程语言实现一个功能丰富的图形用户界面（GUI）应用，它允许用户进行绘画操作，类似于电子画板。这个应用程序具备了一系列常见的绘图工具，如绘图、颜色...
matlab画图-processing-m开发笔记
最新发布
06-19
Processing-M是一个轻量级的编程环境，可与MATLAB结合，提供更高级的图形渲染和交互功能。通过MATLAB的`system`命令或者`javaaddpath`添加Processing库，可以调用Processing的功能，如创建自定义的动画和交互式图形...
UML-交互图-序列图和协作图
憧憬的专栏
10-02 1万+
文章目录1.是交互图2.序列图（Sequence Diagram）/协作图（Collaboration Diagram）3. 序列图构成3.1object（对象）3.2 lifeline（生命线）3.3 message（消息）4.协作图构成4.1 object（对象）4.2 message（消息）4.3 link（链）5.序列图/协作图实例汽车租赁序列图--机房收费系统一般用户上机操作员注册协作图...
UML---交互图（顺序图和协作图）
灵活的小胖子
06-25 3407
交互图 交互图用来描述对象之间的交互关系，包括顺序图和协作图 交互图用来描述系统中的对象是如何进行相互作用的。即一组对象是如何进行消息传递的。 顺序图 1.概念：描述对象之间的交互顺序，着重体现对象间消息传递的时间顺序，强调对象之间消息的发送顺序，同时也显示对象之间的交互过程。 顺序图是将交互关系表示为一个二维图，纵向是时间轴，时间沿竖线向下延伸。横轴代表了在协作中各独立对象的类元角色。
【UML】UML交互图（顺序图和通信图）
m0_51371693的博客
05-30 1万+
UML交互图（顺序图和通信图）1.交互图简介2.前置——CRC cards（Class-Responsibility-Collaborator）3.对比和优缺点4.交互图详解4.1 顺序图通信图共同点生命线框图消息表达式4.2 顺序图基本构成创建与销毁对象框图多态同步与异步顺序图代码实例4.3 通信图链、消息创建实例消息嵌套（编号）有条件消息带有互斥路径的有条件编号三者组合使用迭代和循环多态同步和异步消息 1.交互图简介 UML使用交互图来描述对象间通过消息的交互，交互图可以用于动态对象建模。 当我们要考虑
UML图详解（七）——交互图（时序图与协作图）
热门推荐
king110108的专栏
10-12 1万+
一、概念 交互图描述对象之间的动态合作关系以及合作过程中的行为次序。交互图常常用来描述一个用例的行为，显示该用例中所涉及的对象以及这些对象之间的消息传递情况，即一个用例的实现过程。 交互图有顺序图和协作图两种形式。 时序图中描述对象按照时间顺序的消息交换。协作图着重描述系统成分如何协同工作。 时序图和协作图从不同角度表达了系统中的交互和系统行为，它们之间可以相互转化
UML入门 之 交互图 -- 时序图 协作图详解
liujianminghero的专栏
04-02 7188
动态图概念 : 从静态图中抽取瞬间值的变化描述系统随时间变化的行为, 动态图包括交互图活动图状态图, 这篇博客研究交互图 包括时序图和协作图; -- 时序图 : 显示对象之间的关系, 强调对象之间消息的时间顺序, 显示对象之间的交互; -- 协作图 : 描述对象之间的交互关系; 一. 时序图 (Sequence Diagram) 1.时序图的
uml系列（七）——交互图
一寸阳光
11-13 2256
uml的交互图，简单的介绍了其中的顺序图，合作图和它们之间的关系，以及交互图与活动图的区别。简单易懂，适合新手。
【UML】——交互图
张兴军的博客
09-05 7026
一、交互图 1、什么是交互图 交互图用来描述系统中的对象是如何进行相互作用的，即一组对象是如何进行消息传递的 交互图主要用于描述协作的动态行为方面 2、两种方式描述 强调消息的时间顺序 强调发送和接受消息的对象的结构组织 3、交互图包括 时序图：强调消息的事件顺序 协作图：强调对象之间的交互关系 二、时序图 1、时序图概念 时序图描述按照事件的先后顺序对象之...
UML——交互图（顺序图与协作图）
小小张自由—>张有博
05-28 4207
目录 交互图 顺序图 协作图 顺序图与协作图之间的关系 交互图 交互图用来描述系统中的对象是如何进行相互作用的。即一组对象是如何进行消息传递的。 交互图主要用来描述协作的动态行为方面 交互图有顺序图和协作图两种形式 ——顺序图：强调消息的时间顺序 ——协作图：强调发送和接收消息的对象的组织。 顺序图 概念：描述按照时间的先后顺序对象之间交互动作过程 顺序图的构成 ——对象：对象代表时序图中的对象在交互过程中所扮演的角色 ——消息：是对象之间的通信，可以是信号或者操作调用。
UML之交互图
Cathy
12-06 1504
【前言】交互图是用来描述系统中的对象是如何进行相互作用的，也就是一组对象是如何进行消息传递的。我们今天分析的交互图主要有两种即顺序图和协作图。 一、顺序图（Sequence diagram） 1、初步认识    顺序图强调消息的时间顺序，描述按照时间的先后顺序对象之间交互动作过程。 2、构成  对象（object）  消息（message）：是对象之间的通信，可以是信号或者操作
JBPM-Side流程设计器架构解析：模型与视图的交互
全局对象如菜单栏、工具条、ProcessDesigner布局以及ProcessEditor和TheModel对象提供了设计器的框架和事件管理功能。Component视图组件主要包括画图板、节点和连接线，由degrafa库负责图形渲染。而Model模型组件则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值