代码中都有很详细的注释,方便小伙伴们读懂
//导入包
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);