我们需要用到 navigation.js
加载相关的模块：esri/toolbars/navigation
1、
//创建基本小工具
var navToolbar = new Navigation(map);
//放大
navToolbar.activate(Navigation.ZOOM_OUT);
//缩小
navToolbar.activate(Navigation.ZOOM_IN);
//漫游
navToolbar.activate(Navigation.PAN);
2、禁止地图平移、放大、缩小等
//一般我会这样写
map.on("load", function () {
var div = document.getElementById("mapDiv_zoom_slider").style;
div.visibility = "collapse"; //隐藏地图左上角的放大缩小按钮
map.disablePan();//禁止拖放
map.disableScrollWheelZoom();//禁止滚轮缩放
map.disableShiftDoubleClickZoom();//禁止shift
map.disableDoubleClickZoom();//鼠标双击缩放
});
3、鹰眼图、比例尺、实时坐标等
（1）、鹰眼图
加载： "esri/dijit/OverviewMap",
var overviewMap = new OverviewMap({ map: map, visible: true, //初始化可见，默认为false attachTo: "bottom-left",//位置，默认右上，放在左下 width: 250, height: 150, opacity: 0.3,//透明度 maximizeButton: true, //最大化/最小化按钮，默认false expandEactor: 2, //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2，这意味着概览地图将至少是两倍的大小的程度矩形。 color: "#000000" }); overviewMap.startup();
（2）、比例尺
加载：
"esri/dijit/Scalebar",//比例尺//比例尺的干活~~~ var scalebar = new Scalebar({ map: map, width: 11, scalebarStyle: "ruler",//line 比例尺样式类型 attachTO: "bottom-right", scalebarUnit: "metric"//显示地图的单位，这里是km });
（3）、获取地图坐标，即鼠标移动到哪里，实时显示坐标
//首先要给地图绑定一个鼠标移上事件
map.on("mouse-move",showCoordinates);
function showCoordinates(evt) {
//the map is in web mercator but display coordinates in geographic (lat, long)
var mp = evt.mapPoint;
//display mouse coordinates
dom.byId("jwd").innerHTML = "当前坐标为：" + mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
}
鼠标点击获取经纬度：
map.on("click",function(evt){
console.log(evt.mapPoint);
})设置地图的初始范围大小
var startExtent = new Extent(XMin,YMin, XMax, YMax,
new SpatialReference({
wkid : 4326
}));
map.setExtent(startExtent);设置地图的中心点
map.centerAndZoom(point,18);18是代表缩放的level
4、 通过arcgis js调用天地图
这里我用到的了封装好的天地图的 js ------》资源传送门：https://download.csdn.net/download/kk_bluebule/10751258
同样，我们把js放到arcgis js api同个目录下
require([
//天地图
"tdlib/TDTLayer",
"tdlib/TDTAnnoLayer",
"tdlib/TDT_ImgLayer",
"tdlib/TDT_ImgAnnoLayer",
"dojo/domReady!"
],function(TDTLayer,TDTAnnoLayer,TDT_ImgLayer,TDT_ImgAnnoLayer){
var tdtLayer =new TDTLayer();
var tdtAnnoLayer =new TDTAnnoLayer();
var tdtImgLayer =new TDT_ImgLayer();
var tdtImgAnnoLayer =new TDT_ImgAnnoLayer();
map.addLayer(tdtLayer);
map.addLayer(tdtAnnoLayer);
map.addLayer(tdtImgLayer);
map.addLayer(tdtImgAnnoLayer);
//先隐藏影像图
tdtImgLayer.hide();
tdtImgAnnoLayer.hide();
//这里顺便也把影像和矢量切换一起说了
//切换矢量
tdtLayer.show();
tdtAnnoLayer.show();
tdtImgLayer.hide();
tdtImgAnnoLayer.hide();
//切换影像
tdtLayer.hide();
tdtAnnoLayer.hide();
tdtImgLayer.show();
tdtImgAnnoLayer.show();
})5、测量实战
（1）、arcgis js 自带的测量工具
首先有个测量工具的容器，一开始为隐藏
#measurementDiv{
position: absolute;
background: #fff;
border: 1px solid #ddd;
margin-top:10px;
border-radius: 5px;
width: 278px;
height: auto;
padding:10px;
margin-left:50px;
right: 106px;
top:57px;
display:none;
z-index:1;
}
<div id="measurementDiv"></div>启动测量小工具
//测量小工具
var measurement = new Measurement({
map: map,
defaultAreaUnit: Units.SQUARE_KILOMETERS,
defaultLengthUnit: Units.KILOMETERS
}, dom.byId("measurementDiv"));
measurement.startup();当你点击测量时：
dom.byId("measurementDiv").style.display = dom.byId("measurementDiv").style.display == "block"?"none":"block";
navToolbar.deactivate();（2）、面对需求测面和测线分开时：可以用另一种方法实现测量的功能，即使用GeometryService
需要用到的模块：
"esri/geometry/webMercatorUtils",
"esri/tasks/GeometryService",
"esri/symbols/Font",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/toolbars/draw",
"esri/symbols/TextSymbol",
"esri/graphic",
"esri/layers/GraphicsLayer","esri/tasks/LengthsParameters",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/geometry/Point",
"dojo/number",
"esri/symbols/SimpleFillSymbol",
"esri/tasks/AreasAndLengthsParameters",
"esri/tasks/ProjectParameters",
"esri/units",
"esri/SpatialReference",
首先初始化参数：
var geometryService = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var startFont = new Font('12px').setWeight(Font.WEIGHT_BOLD);//定义文字样式
var makerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,8, new
SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new
Color([204,102,51]),1),new Color([158.184,71,0.65]));//定义标记点样式
var toolbar_mesure = new Draw(map);
//直接上代码了，我有点累了，今晚不想弄太晚了，
//长度量算
function distanceMeasure() {
map.enableScrollWheelZoom();
disFun=true;
areaFun=false;
toolbar_mesure.activate(Draw.POLYLINE);
}
//面积量算
function areaMeasure() {
map.enableScrollWheelZoom();
disFun=false;
areaFun=true;
toolbar_mesure.activate(Draw.POLYGON);
}
//生成两点之间的连线
toolbar_mesure.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2));
// 量算功能触发
map.on("click",function (evt) {
mapClick(evt);
});
//触发完成的事件
toolbar_mesure.on("draw-end",function (evt) {
addToMap(evt);
});
//生成两点之间的连线
toolbar_mesure.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2));
//量算函数
function mapClick(evt) {
if(disFun){
inputPoints.push(evt.mapPoint);
var textSymbol;
if(inputPoints.length ===1){
textSymbol = new TextSymbol("起点",startFont,new Color([204,102,51]));
textSymbol.setOffset(0,-20);
map.graphics.add(new Graphic(evt.mapPoint,textSymbol));
}
map.graphics.add(new Graphic(evt.mapPoint,makerSymbol));
if(inputPoints.length >=2){
// 设置距离测量的参数
var lengthParams = new LengthsParameters();
lengthParams.distanceUnit = GeometryService.UNIT_METER;
lengthParams.calculationType = "preserveShape";
var p1 = inputPoints[inputPoints.length-2];
var p2 = inputPoints[inputPoints.length-1];
if(p1.x ===p2.x &&p1.y===p2.y){
return;
}
// z在两点之间划线将两点链接起来
var polyline = new Polyline(map.spatialReference);
polyline.addPath([p1,p2]);
lengthParams.polylines=[polyline];
// 根据参数，动态的计算长度
geometryService.lengths(lengthParams,function(distance){
var _distance = number.format(distance.lengths[0]/1000);
totleDistance+=parseFloat(_distance);//计算总长度
var beetwentDistances = _distance+"千米";
var tdistance = new TextSymbol(beetwentDistances,startFont,new Color([204,102,51]));
tdistance.setOffset(40,-3);
map.graphics.add(new Graphic(p2,tdistance));
if(totalGraphic){
map.graphics.remove(totalGraphic);
}
var total=number.format(totleDistance,{
pattern:"#.000"
});
// 设置总长度的显示样式，并添加到地图上
var totalSymbol=new TextSymbol("总长度："+total+"千米",startFont,new Color([204,102,51]));
totalSymbol.setOffset(40,-15);
totalGraphic= map.graphics.add(new Graphic(p2,totalSymbol));
});
}
}
}
// 添加图形函数
function addToMap(evt) {
if(disFun||areaFun){
var geometry = evt.geometry;//绘制图形的geometry
console.log(geometry);
//将绘制的图形添加到地图上去
var symbol = null;
switch (geometry.type){
case "point":
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1),
new Color([0,255,0,0.25]));
break;
case "polyline":
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0,0.8]),2);
break;
case "polygon":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),
new Color([255,255,0,0.25]));
break;
case "extent":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),
new Color([255,255,0,0.25]));
break;
}
map.graphics.add(new Graphic(geometry,symbol));
if(disFun){
inputPoints.splice(0,inputPoints.length);//删除数组中的所有元素
totleDistance =0.0;
totalGraphic = null;
}
else if(areaFun){
//设置面积和长度的参数
var areasAndLengthsParameters =new AreasAndLengthsParameters();
areasAndLengthsParameters.lengthUnit = GeometryService.UNIT_METER;//设置距离单位
areasAndLengthsParameters.areaUnit = GeometryService.UNIT_SQUARE_KILOMETERS;//设置面积单位
this.outSR = new esri.SpatialReference({ wkid: 102113 });
geometryService.project([geometry], this.outSR, function (geometry) {
/*console.log(geometry[0]);
console.log(geometry.getCentroid());*/
geometryService.simplify(geometry, function (simplifiedGeometries) {
areasAndLengthsParameters.polygons = simplifiedGeometries;
// areasAndLengthsParameters.polygons[0].spatialReference = new esri.SpatialReference(4490);
geometryService.areasAndLengths(areasAndLengthsParameters,function (result) {
console.log(areasAndLengthsParameters.polygons[0]);
console.log(result.areas);
var font =new Font("16px",Font.STYLE_NORMAL,Font.VARIANT_NORMAL,Font.WEIGHT_BOLDER);
var areaResult = new TextSymbol(number.format(result.areas,{
pattern:'#.000'
})+"平方公里",font,new Color([204,102,51]));
var spoint = new Point(areasAndLengthsParameters.polygons[0].getExtent().getCenter().x,areasAndLengthsParameters.polygons[0].getExtent().getCenter().y,new SpatialReference({ wkid:102113 }));
var point_center;
var PrjParams = new ProjectParameters();
PrjParams.geometries = [spoint];
PrjParams.outSR = new SpatialReference({wkid: 4490});
geometryService.project(PrjParams, function (outputpoints) {
point_center = new Point(outputpoints[0].x,outputpoints[0].y,new SpatialReference({ wkid:4326 }));
//alert("经度："+outputpoints[0].x+",纬度："+ outputpoints[0].y);
map.graphics.add(new Graphic(point_center,areaResult));//在地图上显示测量的面积
});
console.log(spoint);
});
});
});
}
}
}好了，今天的arcgis js总结就到这里，我去整理下前段时间头疼的arcsde 连接oracle = =
加油！你是最胖的~