總結：一、地圖的基本操作
我們需要用到 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放到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 = =
加油！你是最胖的~