今天总算敲定实习的事,也不知道未来等待我的将是什么,但是我知道我既然选择了就要把它做好,选择就不要后悔,走下去====开车开车
一、实现的思路
二、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 最基本的应用