ArcGIS实现绘制点、线、面等图形

一、实现的思路

首先声明一个GraphicLayer的图层，（该图层是客户端类型图层，与ArcGIS Server发布的图层没有任何联系，绘画的对象也在客户端完成）然后生命工具类 Draw，根据点选的不同进行绘画，然后将绘画的图形进行渲染

二、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、绘图工具函数的封装

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

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的函数封装

function addGraphic(evt) {
          //关闭绘图工具
          tb.deactivate();
           //禁用导航
          map.enableMapNavigation();
          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));
        }

原链接：https://www.cnblogs.com/tuboshu/p/10752366.html

画圆画多边形 ArcGIS API for JavaScript

require([
         "esri/geometry/Circle",
	 "esri/geometry/Polygon",
	 "esri/Map",
	 "esri/layers/GraphicsLayer",
	 "esri/Graphic"
 
	],function(Circle,Polygon,GraphicsLayer,Map){
	
	var map = new Map("map",{
		center:[-81.3765, 28.54175)],
		slider:false,
		maxZoom: 6,
		fadeOnZoom: true
	});
	var graLayer = new GraphicsLayer();
	
	//画圆  Circle类
	//定义要画的图形的线条颜色
	var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("red");
	
	// lon 经度 lat纬度（圆的中心点） radius 半径
	function setCircle(lon,lat,radius){
		var pt = new Point(lon,lat,map.spatialReference);
		var radius = radius;
		var circle = new Circle({
			crenter: pt,
			geodesic: true,
			radius: radius
		});
		
		var graphic = new Graphic(circle,symbol);
		graLayer.add(graphic);
	}
	
	//画多边形  Polygon
	function setPolygon(){
		var polygon = new Polygon(new SpatialReference({wkid:4326}));
		//添加多边形的各个角的顶点坐标，注意：首尾要链接，也就是说，第一个点和最后一个点要一致
		polygon.addRing([[-180,-90],[-180,90],[180,90],[180,-90],[-180,-90]]);
		var graphic = new Graphic(circle,symbol);
		graLayer.add(graphic);
	}
	//创建地图服务图层
	var tiledMapServiceLayer = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");
	map.addLayer(tiledMapServiceLayer);
	map.addLayer(graLayer);
	//打开地图
	map.centerAndZoom(new Point(-81.3765, 28.54175)),6);
});