JS API3.4的要求

à(1) IE9或以上版本

否則dijit1.8.3不匹配

1.如何釋出ArcgisJavascript API應用

0.準備工作：

(1).有web應用:

(2).有jsapi開發包

1.將jsapi目錄拷貝到自己的Web應用目錄下

2.在頁面中新增引用(2個css,1個js)

3.在頁面中新增載入地圖的指令碼

dojo.ready(function(){

mapObj=new esri.Map("map");

var districtLayer = newesri.layers.ArcGISDynamicMapServiceLayer(“http://localhost:6080/arcgis/rest/services/TF/baseMap/MapServer”, { id: "districLayer"});

mapObj.addLayer(districtLayer);

});

3.釋出Web應用

web應用釋出的地址是:

localost/webLab/layerOper

4.寫出訪問jsapi/js/dojo/dojo/dojo.js的url

在瀏覽器中檢查

確認地址正確後,擷取url一段

localhost/webLab/layerOper/jsapi/js/dojo/dojo

5.將Url片段替換init.js中的baseUrl:

在init.js中搜索 baseUrl:

baseUrl:(location.protocol === 'file:' ? 'http:' : location.protocol) + '//' + "[HOSTNAME_AND_PATH_TO_JSAPI]js/dojo/dojo"

將localhost/webLab/layerOper/jsapi/js/dojo/dojo替換掉

[HOSTNAME_AND_PATH_TO_JSAPI]js/dojo/dojo

儲存init.js並退出。

5.將Url片段替換dojo.js的baseUrl:

對dojo/dojo/dojo.js施加同樣的操作。

6.釋出成功後,可以瀏覽地圖了

1. 如何部署本地sdk

什麼是sdk?

sdk=tutorials+API Referenc+Samples

如何部署sdk?

(1)下載sdk,解壓得到目錄arcgis_js_v37_sdk

(2)將arcgis_js_v37_sdk\ arcgis_js_api\sdk目錄拷貝到tomcat Webapp目錄下

(3)startUp tomcat, 訪問localhost/sdk

接下來存在的問題：

拔掉網線，會發現reference頁面，無法向下滾動. 解決方式：

(1)滑鼠左下向下拉動

釋出GIS應用常見問題

Init.js 和 dojo.js編碼

預設使用的編碼是 ANSI

不要改變編碼,否則釋出後載入init.js出問題

<script src=”Init.js”></script>提示ieDefineFailed

原因：頁面中引用了purl.js和xdate.js，衝突

服務端自帶的服務載入指令碼

使用方法：

-1將兩個css指向本地服務的css

2-將init.js指向本地服務的init.js

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>ArcGIS JavaScript API: TF/newmap</title>

@import "/arcgis/rest/static/jsapi.css";

</style> <script type="text/javascript"> var djConfig = { parseOnLoad: true };

</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"> </script> <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer");

dojo.require("dijit.layout.ContentPane");

dojo.require("esri.map");

var map;

function init() {

map = new esri.Map("map");

var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.254.53.85:6080/arcgis/rest/services/TF/newmap/MapServer");

map.addLayer(layer);

var resizeTimer;

dojo.connect(map, 'onLoad', function(theMap) {

dojo.connect(dijit.byId('map'), 'resize', function() {

clearTimeout(resizeTimer);

resizeTimer = setTimeout(function() {

map.resize();

map.reposition();

}, 500);

});

}

dojo.addOnLoad(init);

</script> </head>

<div style="float:left;" id="breadcrumbs">ArcGIS JavaScript API: TF/newmap</div>

Built using the <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/">ArcGIS JavaScript API</a>

</div> </div> <div id="map" dojotype="dijit.layout.ContentPane" region="center"> </div> </div> </body>

</html>

2. 圖層操作（layers）

Prerequirement:

必須新增的引用：

關鍵:4句。dojo.require(“esri.map”);

var map=new esri.map(“map”);

var layer=new esri.layer.DynamicLayer(“REST Service URL”)

map.addlaer(layer)

詳細：參見1.

圖層物件

向量圖：ArcGISDynamicMapServiceLayer

影像圖：ArcGISImageServiceLayer

GraphicsLayer

….

載入向量圖(mxd)

關鍵:esri.layers.ArcGISDynamicMapServiceLayer

map.addLayer

var districtLayer = new esri.layers.ArcGISDynamicMapServiceLayer(gSettings.serviceUrl.districtMapUrl, { id: "baseMapLayer" }); mapAppObj.map.addLayer(districtLayer);

//url:

載入影像圖層

keyWord:esri.layers.ArcGISImageServiceLayer

var imageLayer = new esri.layers.ArcGISImageServiceLayer(gSettings.serviceUrl.imageServiceUrl, { id: "baseMapLayer" });

mapAppObj.map.addLayer(imageLayer);

備註：影像圖層有兩種方式

（1）在arccatLog中，右鍵點選，share as imageService.如果這樣，使用ArcGISImageServiceLayer載入影像

（2）在arcMap中，share as Service.如果這樣，使用ArcGISDynamicMapService載入。

載入GraphicsLayer

//建立graphicsLayer

var graphicLines=new esri.layers.GraphicsLayer();

var graphicLines=new esri.layers.GraphicsLayer({id:”graFun”});

//新增到地圖

map.addLayer(graphicLines)

//查詢line圖層,獲取feature

var queryTask = new esri.tasks.QueryTask(getQueryUrl(1));

var query = new esri.tasks.Query();

query.outSpatialReference = gSettings.spatialReference;

query.returnGeometry = true;

query.outFields = ["*"];

query.where = "1=1";

var tempAr = [queryTask.execute(query)];

var deferList = new dojo.DeferredList(tempAr);

deferList.then(function (results) {

if (results[0][0] == false || results[0][1].features.length == 0) {

console.log("獲取線路圖層失敗,請檢查GIS服務");

return;

}

console.log("graphicLines get,count:"+results[0][1].features.length);

var lineFeatures = results[0][1].features;

//從feature生成graphic

for (var i = 0; i <= lineFeatures.length - 1; i++) {

var lineName = lineFeatures[i].attributes.KEY_NAME;

var lineWidth = 4;

var lineSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([255,255,0])).setWidth(lineWidth);

//生成lineGraphic並放入graphicsLayer

_this.graphicLines.add(new esri.Graphic(lineFeatures[i].geometry, lineSymbol, lineFeatures[i].attributes, null));

}

GraphicsLayer添Graphic(點、線、面)

前提:從feature建立Graphic.

如果無feature,請參考從座標生成feature.

步驟:為feature設定symbol

關鍵句: var gra=new esri.Graphic(feature,symbol,attributes,infoTemplate);

graphicsLayer.add(gra);

備註:-1.graphic的feature是傳址引用。

-2.如果需要從座標生成feature,參考feature操作。

設定點symbol,生成 graphic

var graphicLayer=new esri.layers.GraphicsLayer();

//方法1

feature.setSymbol(new esri.symbol.PictureMarkerSymbol(“start.png”, 21, 21));

feature.setInfoTemplate("起點資訊", "${NAME}");

graphicLayer.add(feature);

//方法2

var pointGra=new esri.Graphic(feature,symbol,attributes,infoTemplate);

graphicLayer.add(pointGra);

備註:建立graphic,feature是必須的.

必須有symbol才能顯示.

attributes，可選。

infoTemplate,點選graphic彈出的資訊窗體,可選.

設定線symbol,生成 graphic

var graphicLayer=new esri.layers.GraphicsLayer();

//方法1

var lineSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([255,255,0])).setWidth(4);

var lineGra=new esri.Graphic(linefeature,lineSymbol,null,null);

graphicLayer.add(lineGra);

//方法2

var lineSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([255,255,0])).setWidth(4);

linefeature.setSymbol(lineSymbol);

graphicLayer.add(linefeature);

設定面symbol,生成graphic

var ringPolygons=new esri.layers.GraphicsLayer();

//方法1：

polygonFeature.setSymbol(new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, newesri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), newdojo.Color(colors.Yellow)));

graphicsLayer.add(polygonFeature);

方法2：

var graPolygon=new esri.Graphic(polygonFeature,symbol,null,null)

graphicsLayer.add(graPolygon);

載入自定義切片圖層

參考 reference, Layers->Creating a custom tiled layer type

舉例：

刪除圖層

關鍵：map.removeLayer(map.getLayer(id));

var targetLayer=mapAppObj.map.getLayer("baseMapLayer");

mapAppObj.map.removeLayer(targetLayer);

方法2：

var graFun=new esri.layers.GraphicsLayer();

map.addLayer(graFun);

map.removeLayer(graFun)

圖層顯/隱

關鍵句：map.getLayer(id).show();

map.getLayer(id).hide();

mapAppObj.map.getLayer("baseMapLayer").show()

mapAppObj.map.getLayer("baseMapLayer").hide()

設定圖層可見scale

說明：設定圖層可見比例尺。

引數：

minScale-最小比例尺-再遠就看不見；minScale設定為0，則在無窮遠也顯示

maxScale-最大比例尺-再近就看不見；maxScale設定為0，在無窮近也顯示

關鍵句：

Map.getLayer(“id”).setScaleRange(minScale,maxScale);

舉例：

Map.getLayer(“baseMapLayer”).setScaleRange(1155600,0)

Map.getLayer(“baseMapLayer”).setScaleRange(800,0)

備註：

tileMapService中控制maxLevel和minLevel,

map載入 dynamicMapService, 那麼dynamicMap的scale也會被限制.

設定圖層透明度

試用圖層:

imageLayer,dynamicMapLayer,graphicsLayer,etc…

方法1:建立圖層時設定

var stationLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.254.53.85:6080/arcgis/rest/services/TF/newmap/MapServer", { "opacity": 0.5 });

map.addLayer(stationLayer);

方法2:

layer.setOpacity(0.5);

應用:

通過JqueryUI 滾動條控制透明度;

$(".testScroll").slider(

{

max:10,//最右側值

value:10,//初始值

orientation:"horizonal",//朝向

slide: function(event, ui) {//滑動回撥函式

var value=ui.value;

var type=event.target.getAttribute("data");

var percent=(value/$(event.target).slider("option","max")).toFixed(1);

var targetLayer=mapObj.getLayer(type);

if(targetLayer==null){return;}

targetLayer.setOpacity(percent);

return;

}

});

圖層順序

dynamicLayer,imageLayer,tileLayer之間切換

引用:jquery-ui.js

前端:

</li>

</li>

</li>

</ul>

js:

//拖拽,改變圖層順序

$("#layerController").sortable({

stop:function(event,ui){

console.log("layerController.stop is triggered");

var layerSortArr=[];

var itemCount=$(".layerItem").length;

$(".layerItem").each(function(i,item){

var tempObj={layer:mapObj.getLayer(item.getAttribute("data")),index:itemCount-1-i};

layerSortArr.push(tempObj);

});

resortMapLayers(layerSortArr);//重排序圖層

}

});

//重排序圖層

//obj,Array[{layer:,index},{layer:,index}];

function resortMapLayers(obj){

console.log("resortMapLayers is triggered");

var tempStr="[";

for(var i=0;i<=obj.length-1;i++){

if(obj[i].layer!=null){

tempStr+="{id:"+obj[i].layer.id+",index:"+obj[i].index+"},";

mapObj.reorderLayer(obj[i].layer,obj[i].index);//index越大,則優先順序越高

}

tempStr+="]";

console.log(tempStr);

}

常見問題

新增圖層的步驟？

1.新增li標籤到ul中；

2.將li下所有data改成圖層的id;

dynamicLayer內部layers切換

背景:dynamicMapService 包含兩個圖層station,line

MapServer/0,station

MapServer/1,line

顯示效果:站在線上。

目標:jsAPI,讓站線上下。

mapObj.getLayer("themeLayer").setDynamicLayerInfos

獲取原始DynamicLayerInfos

var firstLayerInfo=mapObj.getLayer("themeLayer").createDynamicLayerInfosFromLayerInfos();

設定DynamicLayerInfos

setDynamicLayerInfos(dynamicLayerInfos, doNotRefresh)

//code snippets

var firstLayerInfo=mapObj.getLayer("themeLayer").createDynamicLayerInfosFromLayerInfos();

var newOrder=[firstLayerInfo[2],firstLayerInfo[1],firstLayerInfo[0]];

mapObj.getLayer("themeLayer").setDynamicLayerInfos(newOrder,false);

變更DynamicLayerInfo.id

背景:.id決定在上還是在下,0在最上,越小越下

圖層事件

graphicsLayer-onMouseOver

描述：mouseOver graphic時,顯示屬性資訊

總結:map.infoWindow.show(map.toScreenPoint(evt.mapPoint));

if(equipMouseOverHandler==null){

equipMouseOverHandler=dojo.connect(equipmentGraphics,"onMouseOver",function(evt){

console.log("equipMouseOver triggered");

evt.graphic.setSymbol(highlightSymbol);

mapAppObj.map.infoWindow.setTitle("裝置型別:"+evt.graphic.attributes.type);

mapAppObj.map.infoWindow.setContent("裝置名稱:"+evt.graphic.attributes.NAME);

//x方向偏小

mapAppObj.map.infoWindow.show(mapAppObj.map.toScreen(evt.mapPoint));

});

console.log("equipMouseOver binded");

}

graphicsLayer點選,顯示屬性資訊框

說明:graphicsLayer={graphic};

esri.Graphic物件

graphic.setInfoTemplate(infoTemplate).點選時會則彈出屬性視窗。

無需繫結graphic.onclick.

var infoTemplate = new esri.InfoTemplate("Attributes", "<tr>State Name: <td>${STATE_NAME}

  </tr></td><br><tr>Population:<td>${Pop2001}</tr></td>");

graphic.setInfoTemplate(infoTemplate);

其它細節

map.graphics 和GraphicsLayer

map.graphics:

map.graphcis物件：map物件預設的一層graphicsLayer.

//map.graphics=GraphicsLayer of a map;

//map.graphics.graphics = all the graphics of map.graphics

graphicsLayer:

esri.layers.GraphicsLayer

={graA,graB,….};

備註:graEle的geometry type可以是任意的。即,允許同時存放lineGra,pointGra,

sectionGra

3.要素操作(geometry)

geometry的型別

String,type.

The type of geometry.

Known values: point | multipoint | polyline | polygon | extent

arcgis for javascript 幫助

JS API3.4的要求

1.如何釋出ArcgisJavascript API應用

1. 如何部署本地sdk

釋出GIS應用常見問題

Init.js 和 dojo.js編碼

<script src=”Init.js”></script>提示ieDefineFailed

服務端自帶的服務載入指令碼

2. 圖層操作（layers）

圖層物件

載入向量圖(mxd)

載入影像圖層

載入GraphicsLayer

GraphicsLayer添Graphic(點、線、面)

設定點symbol,生成 graphic

設定線symbol,生成 graphic

設定面symbol,生成graphic

載入自定義切片圖層

刪除圖層

圖層顯/隱

設定圖層可見scale

設定圖層透明度

圖層順序

dynamicLayer,imageLayer,tileLayer之間切換

dynamicLayer內部layers切換

圖層事件

graphicsLayer-onMouseOver

graphicsLayer點選,顯示屬性資訊框

其它細節

map.graphics 和GraphicsLayer

3.要素操作(geometry)

geometry的型別

相關推薦