ArcGIS API for js 实现点、线、面等图形的绘画

匿名 (未验证) 提交于 2019-12-03 00:36:02

今天总算敲定实习的事,也不知道未来等待我的将是什么,但是我知道我既然选择了就要把它做好,选择就不要后悔,走下去====开车开车

一、实现的思路


二、HTML布局

    <div id="info">         <sapn>点击你所要绘画的图形</span>         <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> 

三、主要的代码

1、引用的类库

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

2、初始化绘图工具

map.on("load", initToolbar);

3、绘图工具函数的封装

4、填充的声明

//设置点的填充样式 var markerSymbol = new SimpleMarkerSymbol(); markerSymbol.setColor(new Color("#00FFFF")); //设置线的填充样式         var lineSymbol = new CartographicLineSymbol(           CartographicLineSymbol.STYLE_SOLID,           new Color([255,0,0]), 10,           CartographicLineSymbol.CAP_ROUND,           CartographicLineSymbol.JOIN_MITER, 5         ); //设置面的填充样式         var fillSymbol = new PictureFillSymbol(           "/Imaage/timg.jpg",           new SimpleLineSymbol(             SimpleLineSymbol.STYLE_SOLID,             new Color('#000'),             1           ),           42,           42         ); 

推荐一个画图js开源插件http://raphaeljs.com/icons/#talkq

5、添加到GraphicLayer的函数封装

四、总结

代码很简单,但是这是一个ArcGIS API For JS 最基本的应用
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!