04-ArcGIS API For Javascript 图形要素graphic

最新推荐文章于 2024-02-15 09:17:35 发布
最新推荐文章于 2024-02-15 09:17:35 发布
阅读量2.3k 收藏 10
点赞数 2
分类专栏： ArcGIS API For JavaScript Map WebGIS 文章标签： ArcGIS API For JavaScript 地图 map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ocean111best/article/details/103225333
版权

一、graphic简介

ArcGIS JavaScript API 允许在地图上绘制 graphic(图形)。graphic可由用户作为标记或输入绘制，也可由应用程序根据任务绘制。如应用程序可将查询结果作为 graphic 添加到地图。可以为地图创建和添加一个或多个 graphic 图层（即 GraphicsLayer），一个 GraphicsLayer 包含一个 Graphic 对象的数组，该数组初始是空的，但是在地图加载之后任何时候都可以添加 graphic。

graphic 对应着 esri/graphic ，一个 Graphic 对象由四部分组成：geometry、symbol、attributes、info template。

  • geometry 决定garphic的位置。可以是 point、multipoint、polyline、polygon。
  • symbol 决定 graphic 的外观，geometry 是 point、multipoint 的 symbol 时可以是 marker symbol，polyline 的 symbol 可以是 line symbol，polygon 的 symbol 可以是 fill symbol。
  • attribute 是描述 graphic 的名称-值对。如果创建 graphic，则需要分配 attributes。如果 graphic 是在一个图层上响应执行任务而创建的，则 graphic 自动包含该图层的字段属性。一些任务允许限制返回到结果 graphic 的 attributes，Query.outFields 是限制任务返回attributes 的一个示例。
  • info template 定义当 graphic 被点击时，各种 attribute 将如何出现。

四个属性 geometry、symbol、attributes和info template 都是可选的。许多 task 结果被作为 FeatureSet 中的 graphic 对象被返回。这些graphic 返回时只有 geometry 和 attributes。如果要将 graphic 添加到地图中，必须为它们定义和设置符号。

若需要允许用户在地图上绘制 graphic，则可以使用 Draw 工具条。Draw 工具条是一个类，可以帮助您捕获用户在屏幕上绘制的geometry，然后您可以定义一个 symbol 并将它应用到新 graphic 对象中的 geometry 中。

二、用户交互画点线面

有时在项目中，会有这么一个需求：让用户在地图上自己绘制一个图形，然后将图形添加到地图当中，要实现这个功能可以使用 Draw 工具条，利用该工具条我们可以得到用户交互画出来的 geometry，从而根据 geometry 生成相应的 graphic ，使用该工具一般步骤为：

  1. 创建绘图对象 graphic；
  2. 激活绘图工具 Draw；
  3. 得到图形 Geometry；
  4. 创建 Graphic；
  5. 添加到地图；

三、代码实现

1、创建 5 个 button

<button>绘制点</button>
<button>绘制折线</button>
<button>绘制面</button>
<button>徒手线</button>
<button>徒手面</button>

2、引入相应模块，其中包括：

dojo/on（用于绑定事件的模块）
esri/symbols/SimpleMarkerSymbol（点符号类）
esri/symbols/SimpleLineSymbol（线符号类）
esri/symbols/SimpleFillSymbol（面符号类）
esri/geometry/Point（点类）
esri/geometry/Polyline（折线类）
esri/geometry/Polygon（面类）
esri/geometry/Circle（圆类）
dojo/query（dojo的选择器，用于选择DOM元素）
esri/graphic（图形类）
esri/layers/GraphicsLayer（客户端图层类）

3、创建绘图对象

var toolbar = new Draw(map, { showTooltips: true });

4、给每个 button 绑定相应的事件（激活绘图工具）

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;
                }

			}
	});

5、给绘图工具绑定绘图完成事件

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();
});

6、全部代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>实现用户交互画图Draw工具</title>
    <link  rel="stylesheet"  type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link  rel="stylesheet"  type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script  type="text/Javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:500px;
            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/symbols/SimpleLineSymbol",
                    "esri/graphic",
                    "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/Test/广州市城市总体规划/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=event.rangeParent.data;
            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>

7、相关说明

  • 在使用绘图工具时，最主要不同为：在激活绘图工具时的赋予参数的不同。
  • graphic 只是客户端图形，并不改变服务本身，如果想改变服务本身的数据，需要使用要素服务，用到 esri/toolbars/Edit 工具。
  • 在生成 graphic 时，最主要是有用这个图形的几何信息，几何信息可以通过多方面获得，如：（1）通过具体的坐标生成 geometry；（2）通过 draw 工具动态获得 geometry；（3）可以通过 map 点击事件获得点的 geometry；一旦拥有了图形的几何信息，我们就可以直接创建 graphic ，从而添加到地图中来。

 

 

 

爱睡懒觉的老舅
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ArcGis-for-javaScript最全中文API.pdf
06-28
ArcGis-for-javaScript最全中文API
ArcGIS API for JavaScript4.8 实例
10-26
包含大量的ArcGIS API for JavaScript4.8的开发实例，可用于WebGIS开发者学习资料，内容全面，并且能正常执行。
Arcgis Javascript API 开发笔记
狼与牧羊人
12-20 4356
1.如何发布ArcgisJavascript API应用 0.准备工作：        (1).有web应用:                       (2).有jsapi开发包             1.将jsapi目录拷贝到自己的Web应用目录下        2.在页面中添加引用(2个
ArcGIS API for Javascript介绍
奋斗---现在进行时
12-09 1662
ArcGIS API for Javascript介绍
Arcgis api for JavaScript开发基础及控件学习
mjy555的博客
03-09 4930
Arcgis api for JavaScript基础及控件学习
ArcGIS for Flex开发中Graphic的attributes解析
10-23
基于ArcGIS for Flex开发，通过Identity查询（任意多个图层），获取查询结果的属性，并能实现图与属性互动。要将查到的Graphic（不同图层字段的多少可能不一样）的属性在DataGrid中显示（字段为一列，属性值为一列）。由于Graphic的属性attributes为Object类型，不能直接与DataGrid绑定或在DataGrid中达不到预期效果。本文详细介绍了实现过程。
ArcGIS for JavaScript
06-11
全面介绍ArcGIS for JavaScript 开发
arcgis for JavaScript入门篇
qq_69444691的博客
07-10 2214
ArcGIS for JavaScript是一种基于Web的地图开发解决方案，由ESRI公司开发。它允许开发人员在Web应用程序中嵌入交互式地图，并使用JavaScript编写地图应用程序。ArcGIS for JavaScript提供了许多功能强大的API和工具，使开发人员能够创建高度定制的地图应用程序。它支持各种地图数据源，包括ESRI的ArcGIS Online服务、第三方地图服务、以及开发人员自己的数据。
Arcgis for javascript 应用开发相关网站推荐（SDK，github社区等）
jieyucx的博客
05-31 2016
是一种用于构建基于Web的GIS应用程序的开发框架。它允许开发人员使用Esri的地图和地理空间数据来构建具有交互性和可视化效果的应用程序。提供了丰富的API和组件，使开发人员可以将地理信息绑定到Web应用程序中的各种UI元素中。该框架还具有可访问性，可扩展性和适应性。支持多种地图服务：包括ESRI的和以及其他供应商的图层服务。可以使用多种数据格式：通过支持多种数据格式，包括JSON、REST和ArcGIS Server中的地图服务，可轻松访问并集成你的数据。
ArcgisForJs快速入门
【cacrle】的博客
01-28 1925
ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调用ArcGIS Server的REST API，将地图资源和其它资源（如ArcGIS Online）嵌入到Web应用中。ArcGIS API for JavaScript提供了丰富的功能，包括页面布局、地图图层、空间坐标转换、要素符号、专题图、属性查询、空间分析、三维场景、小部件、渲染器等。本文介绍如何快速入门ArcgisForJs。
ArcGis-for-javaScript最全中文API.docx
06-21
ArcGIS for JavaScript API ArcGIS for JavaScript API 是一款功能强大且灵活的 API，用于构建基于 Web 的 GIS 应用程序。该 API 提供了丰富的功能和工具，帮助开发者快速构建功能强大且交互式的 GIS 应用程序。本...
arcgis api for javascript v4.23
06-26
《ArcGIS API for JavaScript v4.23：深入解析与应用》 ArcGIS API for JavaScript是Esri公司推出的一款强大的地图开发工具，主要用于构建交互式的Web GIS应用。v4.23版本作为其一个重要更新，引入了众多新特性和...
arcgis api for javascript v4.18 v3.35
12-22
《ArcGIS API for JavaScript v4.18与v3.35详解》 ArcGIS API for JavaScript是Esri公司提供的一款强大的地图开发工具，用于在Web应用中构建交互式地图和地理信息系统。此API支持两种主要版本：v3.x系列和v4.x系列...
ArcGIS API For Javascript（针对版本4.x）
体验新模板
10-09 3324
来源： https://www.bilibili.com/video/BV1Mf4y1D7Eb ArcGIS APl for JavaScript是什么? 用来构建2D和3D地图应用的一套简单、易用的API，具备强大制图能力和基于数据驱动的地图可视化能力，用来构建WebGIS系统。 特性:三维支持更加完善，BIM支持进一步加强 特性:三维与GP服务结合，解决三维世界更多实际问题。 特性:根据用户需求和发展趋势，不断增加和更新功能 特性:数据驱动的可视化，让数据变得更加直观和美观 升级指南 属性: ○例如:
ArcGIS API for JavaScript初级
LoveZJC96的博客
08-02 865
最后再把newGraphic创建的函数添加到newMapView创建的函数中。给地图加上点线面，要用到"esri/Graphic"，Graphic意为绘图。创建地图用是"esri/Map"和"esri/views/MapView"。popupTemplate选择图形时在弹出窗口中显示内容的模板。attributes定义与图形关联的字段和字段值的名称和对应值。注如果想创建大量的点，那么可以通过循环创建。2D和3D查看共有的。而MapView用于把地图。......
arcgis的graphics创建、选中和移动
bobo889的博客
10-24 1742
有时我们需要在arcgis地图上创建点线面（多边形）等图形。下面我们根据官方文档，梳理一下具体思路。包括Graphic创建，在地图上被选中，移动Graphic的位置的整个思路及代码。使用mapView的identifyGraphicsOverlayAsync方法进和识别选中。使用刚才识别或选中的点或线或面的selectedGraphic，修改位置。二、在graphicsOverlay选中，识别选中的图形selectedGraphic。愿意看官方英文文档的朋友，可以查看下面相关文档，也可以相互沟通学习。
ArcgisForJS基础
最新发布
【cacrle】的博客
02-15 1416
ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调用ArcGIS Server的REST API，将地图资源和其它资源（如ArcGIS Online）嵌入到Web应用中。ArcGIS API for JavaScript提供了丰富的功能，包括页面布局、地图图层、空间坐标转换、要素符号、专题图、属性查询、空间分析、三维场景、小部件、渲染器等。本文介绍ArcgisForJS基础，编写第一个应用程序，并介绍开发调试工具。
ArcGis for javascript 绘制线！！！
dizuncainiao的博客
09-06 3129
本篇主要介绍如何在 Vue 中 使用 ArcGis for javascript，并且如何绘制线，可直接先看一下动态效果图确定是不是你想要的！！！
Vue+OpenLayers学习系列（十）OpenLayers读取VectorLayer矢量图层数据(GeoJson格式)
Ocean111best的博客
04-24 3739
之前有看到OpenLayers官网（https://openlayers.org/en/latest/examples/box-selection.html）读取GeoJson数据是下面这样读的，但是我怎么读都读不出来，报各种错。 //这是官网读GeoJson的方法 var vectorSource = new VectorSource({ url: 'data/geojson/countries.geojson', format: new GeoJSON(), }); 后面查了很多资料，发现
ArcGIS API for JavaScript 中文教程
05-17
ArcGIS API for JavaScript 是一个基于Web的GIS API，用于创建交互式地图和应用程序。它提供了许多强大的功能和工具，例如地图、图层、符号、查询、分析、可视化等等，可以帮助开发人员构建高度定制化的GIS应用程序。 以下是一些关于ArcGIS API for JavaScript的中文教程资源： 1. 官方文档中文版：https://developers.arcgis.com/javascript/latest/guide/index.html 2. ArcGIS API for JavaScript 入门教程：https://www.cnblogs.com/axl234/p/11000904.html 3. ArcGIS API for JavaScript 实战教程：https://www.cnblogs.com/axl234/p/11000905.html 4. ArcGIS API for JavaScript常用功能教程：https://www.cnblogs.com/yangbj/p/10432025.html 5. ArcGIS API for JavaScript 开发实例教程：https://blog.csdn.net/weixin_39532995/article/details/104532747 希望这些资源能帮助你学习ArcGIS API for JavaScript，进一步掌握GIS开发技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值