arcgis JavaScript绘制点线面

代码中都有很详细的注释,方便小伙伴们读懂

//导入包
	dojo.require("dijit.layout.BorderContainer");
	dojo.require("dijit.layout.ContentPane");
	dojo.require("esri.map");
	dojo.require("esri.toolbars.draw");
	dojo.require("dojo.dom");
	dojo.require("dojo.on");
	dojo.require("esri.dijit.Popup");
	
	var baseMap = "http://localhost:6080/arcgis/rest/services/广东省/MapServer";//自己制作的地图发布服务的路径
	var map, defaultSymbol, highlightSymbol, resultTemplate;
	function init() {
		//创建地图,设置初始化边界
		map = new esri.Map("map");
		map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer(baseMap));//访问服务器
		dojo.connect(map, "onLoad", createToolbar); // 绑定加载事件 
		//创建popup弹出层
		var popup = new Popup(null, domConstruct.create("div"));
		//点击地图响应
		map.on("click", function(e) {
			//点击空白处隐藏popup
			if (e.graphic == undefined) {
				popup.hide();
			}
		});

	}
    function drawpoint(){
        //激活绘图工具,我要绘制一个点图形
        toolBar.activate(esri.toolbars.Draw.POINT);
        map.hideZoomSlider();
        }
    function drawline(){
        //激活绘图工具,我要绘制一个线图形
        toolBar.activate(esri.toolbars.Draw.POLYLINE);
        map.hideZoomSlider();
        }
				
	//画圆
	function drawgis() {
		toolbar.activate(esri.toolbars.Draw.CIRCLE);
		map.hideZoomSlider();
	}
	//画多边形
	function drawgisfang() {
		toolbar.activate(esri.toolbars.Draw.POLYGON);
		map.hideZoomSlider()
	}
	//椭圆
	function drawgisrod() {
		toolbar.activate(esri.toolbars.Draw.RECTANGLE);
		map.hideZoomSlider()
	}
	function createToolbar(themap) {
		toolbar = new esri.toolbars.Draw(map); // esri.toolbars.Draw(map, options)  
		dojo.connect(toolbar, "onDrawEnd", addToMap); // 绘制完成触发  
	}

	function addToMap(geometry) {
		toolbar.deactivate(); // 关闭工具栏并激活地图导航.  
		map.showZoomSlider(); //在地图上显示的缩放滑块  
		// 判断几何图形的类型  
		switch (geometry.type) {
		case "point"://点
			var symbol = new esri.symbol.SimpleMarkerSymbol(
					esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, // 样式,STYLE_CIRCLE(●),STYLE_CROSS(+),STYLE_DIAMOND(◆),STYLE_SQUARE(■),STYLE_X(X)  
					10, // 像素  
					new esri.symbol.SimpleLineSymbol(
							esri.symbol.SimpleLineSymbol.STYLE_SOLID, // 样式,STYLE_DASH(破折号),STYLE_DASHDOT(点划线),STYLE_DASHDOTDOT,STYLE_DOT(点),STYLE_NULL,STYLE_SOLID(实线)  
							new dojo.Color([ 255, 0, 0 ]), // 颜色  
							1 // 像素  
					), new dojo.Color([ 0, 255, 0, 0.25 ]) // 颜色和透明度  
			);
			break;
		case "polyline"://线
			var symbol = new esri.symbol.SimpleLineSymbol(
					esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([
							255, 0, 0 ]), 1);
			break;
		case "polygon"://面
			var symbol = new esri.symbol.SimpleFillSymbol(
					esri.symbol.SimpleFillSymbol.STYLE_SOLID,
					new esri.symbol.SimpleLineSymbol(
							esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
							new dojo.Color([ 255, 0, 0 ]), 2), new dojo.Color([
							255, 255, 0, 0.25 ]));
			break;
	
		}
		var graphic = new esri.Graphic(geometry, symbol);
		map.graphics.add(graphic); // 将绘图加入到图层中  
	}

	dojo.ready(init); // 初始化加载 
	dojo.addOnLoad(init);

猜你喜欢

转载自blog.csdn.net/weixin_42451089/article/details/88886016