软件
产品
我们需要用到 navigation.js
加载相关的模块：esri/toolbars/navigation
//创建基本小工具 var navToolbar = new Navigation(map); //放大 navToolbar.activate(Navigation.ZOOM_OUT); //缩小 navToolbar.activate(Navigation.ZOOM_IN); //漫游 navToolbar.activate(Navigation.PAN);
//一般我会这样写 map.on("load", function () { var div = document.getElementById("mapDiv_zoom_slider").style; div.visibility = "collapse"; //隐藏地图左上角的放大缩小按钮 map.disablePan();//禁止拖放 map.disableScrollWheelZoom();//禁止滚轮缩放 map.disableShiftDoubleClickZoom();//禁止shift map.disableDoubleClickZoom();//鼠标双击缩放 });
（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();一键获取完整项目代码html
（2）、比例尺
加载：
"esri/dijit/Scalebar",//比例尺//比例尺的干活~~~var scalebar = new Scalebar({ map: map, width: 11, scalebarStyle: "ruler",//line 比例尺样式类型 attachTO: "bottom-right", scalebarUnit: "metric"//显示地图的单位，这里是km});一键获取完整项目代码html
（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
这里我用到的了封装好的天地图的 js ------》资源传送门：https://download.csdn.net/download/kk_bluebule/10751258
上面的js已经过时了，天地图api 于2019年1月更新
最新资源：
同样，我们把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(); })（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 = =
加油！你是最胖的~
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删
技术文档
热门文章
155-2731-8020
