1> 更改 ../arcgis_js_api/library/3.22/3.22/init.js 與 ../arcgis_js_api/library/3.22/3.22/dojo/dojo.js 文件javascript
2> 將 "https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo" 改成 "http://ip:port/項目路徑/arcgis_js_api/library/3.22/3.22/dojo/dojo"css
1 // Reference the JavaScript API from our CDN and you are ready to get started: 2 <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css"> 3 <script src="https://js.arcgis.com/3.23/"></script>
<div id="myMap"></div>
1 dojo.require('esri.layers.WebTiledLayer'); // 加載天地圖 2 dojo.require('dojo.parser'); 3 dojo.require('esri.request'); 4 dojo.require('dojo.domReady!'); 5 dojo.require('esri.layers.FeatureLayer'); 6 dojo.require('esri.layers.GraphicsLayer'); 7 dojo.require('esri.toolbars.navigation'); 8 dojo.require('esri.dijit.OverviewMap'); 9 dojo.require('esri.toolbars.draw'); 10 dojo.require('esri.tasks.query'); 11 dojo.require('esri.dijit.Scalebar'); 12 dojo.require('dijit.dijit'); 13 dojo.require('dijit.form.Button'); 14 dojo.require('dijit.Toolbar'); 15 dojo.require('dijit.layout.BorderContainer'); 16 dojo.require('dijit.layout.ContentPane'); 17 dojo.require('dijit.layout.AccordionContainer'); 18 dojo.require('dojo.date.locale'); 19 dojo.require('dojo.dom-style');
dojo.ready(mapInit); // 初始化地圖
1 function mapInit() { 2 // 初始化範圍設置 3 startExtent = new esri.geometry.Extent(mixX, mixY, maxX, maxY, 4 new esri.SpatialReference({wkid: 4490}) 5 ); 6 esri.config.defaults.map.sliderLabel = null; 7 map = new esri.Map("map", { 8 logo: false, 9 slider: false, 10 extent: startExtent 11 }); 12 }
1 esri.config.defaults.map.sliderLabel = null; 2 map = new esri.Map('myMap', { 3 logo: false, 4 slider: false, 5 maxZoom: z, 6 spatialReference: { 7 wkid: 4490, 8 }, 9 }); 10 point = new esri.geometry.Point(x, y); 11 map.centerAndZoom(point, z);
1 esri.config.defaults.map.sliderLabel = null; 2 map = new esri.Map("map", { 3 center : [ x, y ], 4 zoom : z, 5 logo : false, 6 spatialReference : { 7 "wkid" : 4326 8 } 9 });
<!-- 引入瓦片地圖 --> arcGISTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(`http://ip:port/arcgis/rest/services/map/mapService/MapServer/`, { id: 'arcGISTiledMapServiceLayer', outFields: ['*'], }); map.addLayers([arcGISTiledMapServiceLayer]);
<!-- 引入緩存地圖 --> arcGISDynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer('http://ip:port/arcgis/rest/services/map/mapService/MapServer/', { id: 'arcGISDynamicMapServiceLayer', outFields: ['*'], }); map.addLayers([arcGISDynamicMapServiceLayer]);
<!-- 引入數據圖層 --> featureLayer = new esri.layers.FeatureLayer("http://ip:port/arcgis/rest/services/map/mapService/MapServer/0", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, id: "featureLayer", outFields: ["*"] }); map.addLayers([featureLayer]);
<!-- 引入graphic圖層 --> graphicLayer = new esri.layers.GraphicsLayer({ id: 'graphicLayer',
outFields: ['*'],
});
map.addLayers([graphicLayer]);
scalebar = new esri.dijit.Scalebar({ map, // 地圖對象 attachTo: 'bottom-right', // 控件的位置,右下角 scalebarStyle: 'line', // line 比例尺樣式類型 scalebarUnit: 'metric', // 顯示地圖的單位,這裏是km });
<!-- 給地圖的底圖或數據圖層綁定點擊事件 --> dojo.connect(map, 'onClick', function() { ...... });
<!-- 給地圖綁定當地圖的比例尺被改變時事件 --> dojo.connect(map, 'onZoomEnd', function() { ...... });
<!-- 當地圖加載完後事件 --> dojo.connect(map, 'onUpdateEnd', function() { ...... });
<!-- 鼠標移入事件 --> dojo.connect(StreetLightsRtus, 'onMouseOver', function(evt) { map.setMapCursor('pointer'); ...... });
<!-- 鼠標移出事件 --> dojo.connect(StreetLightsRtus, 'onMouseOut', function() { map.setMapCursor(''); ...... });
<!-- 引入相關依賴 --> dojo.require('esri.toolbars.draw'); <!-- 加載框選工具Draw --> map.onLoad = initToolbar(); <!-- 禁用框選工具Draw --> draw.deactivate(); <!-- 框選 --> function initToolbar() { draw = new esri.toolbars.Draw(map); // 當完成框選範圍時,在範圍內找到點 dojo.connect(draw, 'onDrawEnd', function() { <!-- 找到範圍內的graphic要素 --> if (graphicLayer !== undefined) { for (let i = 0; i < graphicLayer.graphics.length; i += 1) { // 判斷開關箱是否在框選範圍 obj = graphicLayer.graphics[i]; if (obj.geometry !== undefined) { if (obj.visible && extent.contains(obj.geometry)) { rtuObjectArr.push(obj.attributes.id); } } } } <!-- 找到範圍內的feature要素 --> if (featureLayer !== undefined) { for (let i = 0; i < featureLayer.graphics.length; i += 1) { // 判斷開關箱是否在框選範圍 obj = featureLayer.graphics[i]; if (obj.geometry !== undefined) { if (obj.visible && extent.contains(obj.geometry)) { rtuObjectArr.push(obj.attributes.id); } } } } }); }
arcGISTiledMapServiceLayer.show();
arcGISDynamicMapServiceLayer.show();
featureLayer.show();
graphicLayer.show();
arcGISTiledMapServiceLayer.hide();
arcGISDynamicMapServiceLayer.hide();
featureLayer.hide();
graphicLayer.hide();
<!-- 新增要素 --> function mapAddGraphic() { point = new esri.geometry.Point(x, y); symbol = new esri.symbol.PictureMarkerSymbol("../../../xxx.png", 16, 16); attributes = { "id": 1, "name":"新增測試" } graphic = new esri.Graphic(point, symbol, attributes); graphicLayer.add(graphic); }
<!-- 更改要素 --> function mapModifyGraphic() { point = new esri.geometry.Point(x, y); symbol = new esri.symbol.PictureMarkerSymbol("../../../xxx.png", 16, 16); attributes = { "id": 1, "name":"更改測試" } graphic = new esri.Graphic(point, symbol, attributes); for (let i = 0; i < graphicLayer.graphics.length; i += 1) { if (graphicLayer.graphics[i].attributes.id === attributes.id) { graphicLayer.remove(graphicLayer.graphics[i]); } } graphicLayer.add(graphic); }
<!-- 刪除要素 --> function mapDeleteGraphic(graphic) { for (let i = 0; i < graphicLayer.graphics.length; i += 1) { if (graphicLayer.graphics[i].attributes.id === graphic.id) { graphicLayer.remove(graphicLayer.graphics[i]); } } }
featureLayer圖層數據的增`刪`改對應的要修改ArcGis Server端的數據,因此該featureLayer引用的數據連接在發佈圖層的時候必須開啓Feature Access功能java
<!-- 1.引入dojo依賴 --> dojo.require('esri.dijit.editing.Add'); <!-- 2.進行添加 --> function mapAddFeature() { featureLayer = new esri.layers.FeatureLayer(`${layerUrl}1`, { mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, outFields: ['*'], }); point = new esri.geometry.Point(x, y); symbol = new esri.symbol.PictureMarkerSymbol("../../../xxx.png", 16, 16); attributes = { "id": 1, "name":"新增測試" } graphic = new esri.Graphic(point, symbol, attributes); RtuAdd = new esri.dijit.editing.Add({ featureLayer, // 給哪個要素圖層添加要素 addedGraphics: [graphic], // 用於添加的要素 }); // 執行添加函數 RtuAdd.performRedo(); featureLayer.refresh(); graphic.setSymbol(symbol); featureLayer.add(graphic); }
<!-- 1.引入dojo依賴 --> dojo.require('esri.dijit.editing.Update');
dojo.require('esri.tasks.query'); <!-- 2.進行更改 --> function mapModifyFeature() { featureLayer = new esri.layers.FeatureLayer(`${layerUrl}1`, { mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, outFields: ['*'], }); query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ['*']; query.where = `id=1`; queryTask = new esri.tasks.QueryTask(`${layerUrl}`); queryTask.execute(query, (results) => { if (results.features.length > 0) { oldGraphic = results.features[0]; point = new esri.geometry.Point(x, y); symbol = new esri.symbol.PictureMarkerSymbol("../../../xxx.png", 16, 16); newGraphic = new esri.Graphic(point, symbol, oldGraphic.attributes); newGraphic.attributes.id = 1; newGraphic.attributes.name = "更改測試"; newGraphic.attributes.x = x; newGraphic.attributes.y = y; RtuUpdate = new esri.dijit.editing.Update({ featureLayer, postUpdatedGraphics: [newGraphic], // 修改以後的要素 preUpdatedGraphics: [oldGraphic], // 修改以前的要素 }); RtuUpdate.performRedo(); featureLayer.refresh(); for (let i = 0; i < graphicLayer.graphics.length; i += 1) { if (graphicLayer.graphics[i].attributes.id === oldGraphic.id) { graphicLayer.remove(graphicLayer.graphics[i]); } } featureLayer.add(newGraphic); } else { mapAddFeature(); } }); }
<!-- 1.引入dojo依賴 --> dojo.require('esri.dijit.editing.Delete');
dojo.require('esri.tasks.query'); <!-- 2.進行更改 --> function mapDeleteLamp() { featureLayer = new esri.layers.FeatureLayer(`${layerUrl}1`, { mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, outFields: ['*'], }); query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ['*']; query.where = `id=1`; queryTask = new esri.tasks.QueryTask(`${layerUrl}`); queryTask.execute(query, (results) => { graphic = results.features[0]; RtuDelete = new esri.dijit.editing.Delete({ featureLayer, deletedGraphics: [graphic], }); RtuDelete.performRedo(); featureLayer.refresh(); for (let i = 0; i < featureLayer.graphics.length; i += 1) { if (featureLayer.graphics[i].attributes.id === id) { featureLayer.remove(featureLayer.graphics[i]); } } }); }
polylineJson = { "paths": [[[120.140524529883, 30.3270758041052], [120.140235682031, 30.3270525737175], [120.139817472998, 30.3270240400276], [120.139431404836, 30.3270008815856]]]}; xlPolyline = new esri.geometry.Polyline(polylineJson); xlSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#00FF00'), 4); xlGraphic = new esri.Graphic(xlPolyline, xlSymbol); polylineLayer.add(xlGraphic);
point = new esri.geometry.Point(x, y); symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, (r)), new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 0.1), new dojo.Color([255, 0, 0, 0.6])); graphic = new esri.Graphic(point, symbol, item); schoolElectricityLayer.add(graphic);
polygonJson ={ rings: [[ [120.193451, 30.283218], [120.194453, 30.263535], [120.165335, 30.264035], [120.161023, 30.278568], [120.168414, 30.280866], [120.166471, 30.288568], [120.162369, 30.288824], [120.158991, 30.295311], [120.172835, 30.300009], [120.16372, 30.314242], [120.164879, 30.317144], [120.192948, 30.352787], [120.20639, 30.3569], [120.21079, 30.35175], [120.218307, 30.351427], [120.217978, 30.340206], [120.209947, 30.336802], [120.209419, 30.328492], [120.203206, 30.327809], [120.213779, 30.326153], [120.209763, 30.321596], [120.19666, 30.318027], [120.194544, 30.307804], [120.19983, 30.308465], [120.191775, 30.295249], [120.193451, 30.283218]]], spatialReference: {wkid: 4326} }; polygon = new esri.geometry.Polygon(polygonJson); symbol = new esri.symbol.SimpleFillSymbol( esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color("#ff0000"), 1), new dojo.Color([172, 148, 85, 0.25])); graphic = new esri.Graphic(polygon, symbol, {行政區: "下城區"}); polygonLayer.add(graphic);
function mapSetPointAndZoom(x, y, z) { point = new esri.geometry.Point(x, y); map.centerAndZoom(point, z); }
<div id="myMap"> <span> <input type="button" id="runningStark" value="設置起點" onclick="runningStark()"/> <input type="button" id="openTool" value="開啓" onclick="openTool()"/> <input type="button" id="closeTool" value="暫停" onclick="closeTool()"/> <input type="button" id="continueTool" disabled="disabled" value="繼續" onclick="continueTool()"/> <input type="button" id="returnTool" disabled="disabled" readonly value="返回" onclick="returnTool()"/> </span> </div>
polylineJson = { // 測試數據 "paths": [[ [120.140524529883, 30.3270758041052], [120.140235682031, 30.3270525737175], [120.139817472998, 30.3270240400276], [120.139431404836, 30.3270008815856], [120.139123789931, 30.3270506635574], [120.138809475077, 30.3271387683396], [120.138707810317, 30.3269174361909], [120.138343646942, 30.3268787653429], [120.138002517003, 30.3268448321235], [120.137661679343, 30.3268103188413], [120.137338229176, 30.3267788839385], [120.137012494731, 30.3267463536615], [120.136655150015, 30.3267106370864], [120.136298906969, 30.3266752415693], [120.135942734070, 30.3266398667366], [120.135580169689, 30.3266049748399], [120.135589970501, 30.3265466502079], [120.135493511916, 30.3265342665433], [120.135307094147, 30.3265103346844], [120.135237810377, 30.3265014403893], [120.135230226394, 30.3265702421231], [120.134855343999, 30.3265328932786], [120.134527389128, 30.3265009583527], [120.134170643361, 30.3264658119479], [120.133820501315, 30.3264309839029], [120.133472301805, 30.3263960002753], [120.133120725341, 30.3263816030287], [120.132775043034, 30.3263553985830], [120.132400386369, 30.3263183069445], [120.132396155958, 30.3263859143786], [120.132103850213, 30.3263658298193], [120.131776976327, 30.3263433701506], [120.131677380907, 30.3263365272092], [120.131652148628, 30.3259547497121] ]], "spatialReference":{"wkid":4326} };
function runningStark(){ // 建立路線 xlPolyline = new esri.geometry.Polyline(polylineJson); xlSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,new dojo.Color("#0000FF"),3); xlGraphic = new esri.Graphic(xlPolyline,xlSymbol); map.graphics.add(xlGraphic); // 建立起點 qdPoint = new esri.geometry.Point(120.140524529883, 30.3270758041052,new esri.SpatialReference({wkid:4490})); qdSymbol = new esri.symbol.PictureMarkerSymbol("/demo0607/images/car.png",10,20); qdGraphic = new esri.Graphic(qdPoint,qdSymbol); map.centerAndZoom(qdPoint,17); // 定位到起點 map.graphics.add(qdGraphic); }
function openTool(){ if(typeof(moving)!="undefined"){ clearInterval(moving); //清除移動 } points = polylineJson.paths[0]; qdGraphic.geometry.x = points[0][0]; qdGraphic.geometry.y = points[0][1]; map.graphics.refresh(); move(0,1); document.getElementById("closeTool").disabled=false; document.getElementById("continueTool").disabled=true; document.getElementById("returnTool").disabled=true; }
function closeTool(){ clearInterval(moving); document.getElementById("continueTool").disabled=false; document.getElementById("returnTool").disabled=false; }
function continueTool(){ if(typeof(moving)!="undefined"){ clearInterval(moving); // 清除移動 } move(startNum,endNum); document.getElementById("returnTool").disabled=true; }
function returnTool(){ qdGraphic.geometry.x = points[0][0]; qdGraphic.geometry.y = points[0][1]; qdGraphic.symbol.angle=0; map.graphics.refresh(); $("continueTool").disabled=true; }
function move(start,end){ startX = points[start][0]; startY = points[start][1]; endX = points[end][0]; endY = points[end][1]; p = (endY - startY) / (endX - startX);//斜率 var v = 0.000315;//距離 距離越小 位置越精確 moving = setInterval(function(){ startNum = start; endNum = end; if(endNum == points.length - 1){ document.getElementById("closeTool").disabled=true; document.getElementById("continueTool").disabled=true; document.getElementById("returnTool").disabled=false; } //分別計算 x,y軸方向速度 if(Math.abs(p) == Number.POSITIVE_INFINITY){//無窮大 qdGraphic.geometry.y += v; } else { if(endX < startX){ //qdGraphic.geometry.x -= (1 / Math.sqrt(1 + p * p)) * v; //qdGraphic.geometry.y -= (p / Math.sqrt(1 + p * p)) * v; qdGraphic.geometry.x = endX; qdGraphic.geometry.y = endY; //計算汽車角度 qdGraphic.symbol.angle = calculateXAndYVision(startX, startY, endX, endY); //// (Math.PI / 2 - Math.atan(p)) * 180 / Math.PI+180 } else { //qdGraphic.geometry.x += (1 / Math.sqrt(1 + p * p)) * v; //qdGraphic.geometry.y += (p / Math.sqrt(1 + p * p)) * v; qdGraphic.geometry.x = endX; qdGraphic.geometry.y = endY; //計算汽車角度 qdGraphic.symbol.angle = calculateXAndYVision(startX, startY, endX, endY); ////(Math.PI / 2 - Math.atan(p)) * 180 / Math.PI } } //圖層刷新 map.graphics.refresh(); //if (Math.abs(qdGraphic.geometry.x - endX) <= 0.01 && Math.abs(qdGraphic.geometry.y - endY) <= 0.01) { clearInterval(moving); startNum = start++; endNum = end++; if (end < points.length){ move(start, end); } //} }, 300); }
function calculateXAndYVision(startX, startY, endX, endY){ tan = Math.atan(Math.abs((endY - startY)/(endX - startX))) * 180 / Math.PI + 90; if (endX > startX && endY > startY){ // 第一象限 return - tan + 180; } else if (endX > startX && endY < startY){ // 第二象限 return tan; } else if (endX < startX && endY > startY){ // 第三象限 return tan - 180; } else if (endX < startX && endY < startY){ // 第四象限 return - tan; } }