Arcgis地圖的簡單應用

阿新 • • 發佈：2019-01-10

//宣告map var map,graphicLayer; var geometryService; //標記陣列 var allMarkers = []; require(["esri/map", "esri/dijit/BasemapToggle", "esri/toolbars/draw", "esri/dijit/Geocoder", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol"

, "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/InfoTemplate", "esri/graphic", "esri/layers/GraphicsLayer", "esri/geometry/Point", "esri/SpatialReference"

, "esri/tasks/LengthsParameters", "esri/tasks/GeometryService", "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"], function(Map, BasemapToggle, Draw,Geocoder, SimpleMarkerSymbol, PictureMarkerSymbol, SimpleLineSymbol, PictureFillSymbol, CartographicLineSymbol, InfoTemplate, Graphic, GraphicsLayer, Point, SpatialReference, LengthsParameters, GeometryService, Color, dom, on)

{ //測量Service arcgis（官網）外網 GeometryService服務地址 geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); //new map物件 map = new Map("map", { basemap: "osm", center: [120.15, 30.26], nav:true,//8個pan 箭頭 slider:false,//左上的縮放 +/-; logo:false,//右下的esri logo showAttribution:false,//右下的gisNeu (logo左側) zoom: 10 }); //地圖縮放響應事件: zoom大於9 顯示camera 否則隱藏 map.on("zoom-end", function(e) { var zoom = map.getZoom(); //console.info(map.graphics); var cameraLayer = map.getLayer("cameralayer"); //console.info(cameraLayer.graphics); if(zoom<9){ //zoom小於8時隱藏camare的顯示 cameraLayer.setVisibility(false); }else{ cameraLayer.setVisibility(true); } }); var geocoder = new Geocoder({ arcgisGeocoder: { placeholder: "Search " }, map: map }, "ui-esri-dijit-geocoder"); geocoder.startup(); //滑鼠樣式 /* map.setMapCursor("help"); // map.setMapCursor("default");// map.setMapCursor("pointer");// map.setMapCursor("wait");// map.setMapCursor("progress");// map.setMapCursor("cell");// 粗十字 map.setMapCursor("crosshair");// 細十字 map.setMapCursor("text");//文字I map.setMapCursor("vertical-text");//放倒的I */ //建立圖層 graphicLayer = new GraphicsLayer({"id":"cameralayer"}); //把圖層新增到地圖上 map.addLayer(graphicLayer); map.on("load", initToolbar); markerSymbol.setColor(new Color("#00FFFF")); //標註圖片 var p_symbol = new PictureMarkerSymbol({ "url":"qiangji.png", "height":32, "width":32 }); p_symbol.setOffset(18, 12); var p_symbol1 = new PictureMarkerSymbol({ "url":"qiuji.png", "height":32, "width":32 }); var lineSymbol = new CartographicLineSymbol( CartographicLineSymbol.STYLE_SOLID, new Color([0,0,0]), 2, CartographicLineSymbol.CAP_ROUND, CartographicLineSymbol.JOIN_ROUND, 5 ); var fillSymbol = new PictureFillSymbol( "qiangji.png", new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color('#000'), 1 ), 42, 42); function initToolbar() { tb = new Draw(map); tb.on("draw-end", addGraphic); on(dom.byId("info"), "click", function(evt) { $("#measure").css("display","none");//隱藏測距顯示內容 if ( evt.target.id === "info" ) { return; } //刪除已有的圖形 map.graphics.clear(); map.setMapCursor("crosshair");//滑鼠形狀為十字 //啟用畫圖工具 var tool = evt.target.id.toLowerCase(); map.disableMapNavigation(); tb.activate(tool); }); } //畫圖 function addGraphic(evt) { tb.deactivate(); map.enableMapNavigation(); var symbol; if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") { symbol = p_symbol;//markerSymbol; } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") { symbol = lineSymbol;//lineSymbol; map.graphics.add(new Graphic(evt.geometry, symbol)); measuregeometry = evt.geometry; MeasureGeometry(evt.geometry);//呼叫測量方法 map.setMapCursor("default");// } else { symbol = lineSymbol;//fillSymbol; map.graphics.add(new Graphic(evt.geometry, symbol)); map.setMapCursor("default"); showResults(evt);//播放框選點位 } } //播放框選出來的點位監控 function showResults(evt){ var graphics = map.getLayer("cameralayer").graphics; var graphicCamera = []; for(var i= 0, total=graphics.length;i<total;i++){ if(evt.geometry.contains(graphics[i].geometry)){ graphicCamera.push(graphics[i].attributes.indexCode); } } if(graphicCamera.length > 0){ $('#videoDialog').dialog({ autoOpen : false, modal : true, maximizable:true, width : 600, height : 500, draggable : true, onBeforeOpen:function(){ for(var i = 0;i<graphicCamera.length;i++){ if(graphicCamera.length == 1){ ocx.setWindowsLayout(1);//設定播放外掛視窗 }else if(graphicCamera.length < 5 && graphicCamera.length > 1){ ocx.setWindowsLayout(2); }else if(graphicCamera.length < 10 && graphicCamera.length > 4){ ocx.setWindowsLayout(3); }else{ ocx.setWindowsLayout(0); } playCameraVideo(graphicCamera[i]); } }, onMaximize : function(){ }, onBeforeClose : function(){ ocx.setSelectWindow(0); stopAll(); map.graphics.clear(); map.setMapCursor("default"); } }); } } function launchFullScreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } //切換地圖模式 var toggle = new BasemapToggle({ map: map, basemap: "satellite" }, "BasemapToggle"); toggle.startup(); //新增標註 addMarker(120.15, 30.26); //滑鼠移動顯示座標 dojo.connect(map, "onMouseMove", showCoordinates); map.on("load", function() {//圖形滑鼠點選響應事件 //map.getLayer("cameralayer") 獲取放置camera的graphicLayer map.getLayer("cameralayer").on("dbl-click",function(e){ var cameraInfo = e.graphic.attributes; e.stopPropagation(); openDialogVideo(cameraInfo.indexCode); }); }); function showCoordinates(evt) { var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint); dojo.byId("pointInfo").innerHTML = mp.x.toFixed(5) + ", " + mp.y.toFixed(5); } }); //開啟dialog並播放視訊 function openDialogVideo(indexCode){ var videoDialog = $('#videoDialog').dialog({ autoOpen : false, modal : true, maximizable:true, width : 600, height : 500, draggable : true, onBeforeOpen:function(){ ocx.setWindowsLayout(1); playCameraVideo(indexCode); }, onMaximize : function(){ }, onBeforeClose : function(){ stopAll(); } }); } //開啟攝像頭視訊流 function playCameraVideo(indexcode){ //ocx.setWindowsLayout(WindowsLayout); $.ajax({ url : "../../../video/ws/getStream", type : "post", data : { indexCode : indexcode }, dataType : "text", success : function(xml) { var winindex = ocx.getSelectWindow(); if(ocx.startPreview(winindex, xml)==0){ if(ocx.setSelectWindow(winindex+1)==-1){ ocx.setSelectWindow(0); } } indexcodes[winindex] = indexcode; } }); } //設定對中點 function setMapCenter(xx, yy , level) { var point = new esri.geometry.Point(xx, yy, map.spatialReference); map.centerAndZoom(point, level); } //獲取點位資訊,同時標註在頁面中 function getPointInfo(){ $.post(path+'/arcgis/cameraInfo/getCamera',{"operaId":"ssjk"},function(json){ var result = eval("("+ json +")"); var cameraInfos = result.rows; for(var i= 0;i<cameraInfos.length;i++){ //確定點位座標 var pt = new esri.geometry.geographicToWebMercator(new esri.geometry.Point({ "x": cameraInfos[i].longitude, "y": cameraInfos[i].latitude, "spatialReference": { "wkid": 102113 } })); //確定camera型別 var cameratype = "qiangji.png";//槍機 if(cameraInfos[i].cameraType == "1"){ cameratype = "qiuji.png";//球機 } //設定標註顯示的圖示 var symbolP = new esri.symbol.PictureMarkerSymbol(cameratype, 32, 32); symbolP.setOffset(16, 16); var attr = cameraInfos[i]; var content = "名稱：" +cameraInfos[i].name + " "+ channelNo +"：" + cameraInfos[i].channelNo + " <a href='#' onclick='openDialogVideo(\""+ cameraInfos[i].indexCode +"\")'>播放</a>"; var infoTemplate = new esri.InfoTemplate("攝像頭資訊", content); var graphic = new esri.Graphic(pt,symbolP);//,attr,infoTemplate graphic.setAttributes(attr); graphic.setInfoTemplate(infoTemplate); graphicLayer.add(graphic); } }); } //新增標註方法 function addMarker(xx, yy) { getPointInfo(); //設定標註的經緯度 //var pt = new esri.geometry.Point(xx, yy, map.spatialReference); //方法二 var pt = new esri.geometry.geographicToWebMercator(new esri.geometry.Point({ "x": xx, "y": yy, "spatialReference": { "wkid": 102113 } })); //設定標註顯示的圖示 var symbolP = new esri.symbol.PictureMarkerSymbol("qiangji.png", 32, 32); symbolP.setOffset(16, 16); var symbolP2 = new esri.symbol.PictureMarkerSymbol("qiuji.png", 32, 32); symbolP.setOffset(0, 16); //要在模版中顯示的引數 var attr = {"add":"杭州市","status":"線上","attributes":{"indexCode":"001073"}}; //建立模版 var infoTemplate = new esri.InfoTemplate("標題", "地址: ${add} 狀態: ${status}"); //建立影象 var graphic = new esri.Graphic(pt,symbolP,attr,infoTemplate); }

Arcgis地圖的簡單應用

iOS百度地圖簡單應用（ iOS地圖定位(定位、地理編碼與反地理編碼、mapView、大頭針）

Arcgis地圖的簡單應用

開源方案搭建可離線的精美矢量切片地圖服務-7.Arcgis Pro企業級應用

百度地圖定位功能的簡單應用

echarts2和百度地圖的簡單應用

百度地圖sdk的簡單應用

『ORACLE』 SQL語句簡單應用（四）（11g）

『ORACLE』 SQL語句簡單應用（五）（11g）

DOM的概念和簡單應用：使用DOM解析XML數據

RabbitM簡單應用

循環簡單應用(2)

linux 抓包 tcpdump 簡單應用

IOS xib在tableview上的簡單應用（通過xib自定義cell）

memcache的簡單應用

npm的簡單應用

LVM的簡單應用-新建-拓展-縮減-移除-遷移

Spring Batch 簡單應用（CSV文件操作）(二)

Spring Batch 簡單應用 (一)（Hello World）

poj2236 Wireless Network 並查集簡單應用

二分的幾種簡單應用——入門

Arcgis地圖的簡單應用

相關推薦