碼上快樂

相關內容    簡體    繁體

ArcGIS API For Javascript之動態圖層

本文轉載自   查看原文   2017-02-21 11:46   4343    webgis+js二次開發

 

 

 

1.引言

      在ArcGIS 10.1版本之后，ArcGIS提供了一種新的功能：動態圖層。准確的說，動態圖層並不是一種新的地圖服務，它更像是地圖服務（MapServer）的一種擴展。 
      動態圖層主要特點：

  • 改變地圖服務的現有圖層
  • 動態圖層適用於海量圖層的情況
  • 不需要將shp文件發布為服務，服務器可以直接讀取shp文件在前端顯示

2.調用動態圖層

      在前面已經說過動態圖層並不是一種新的服務類型，而是地圖服務的一種擴展，因此我們不需要發布服務，只需要對地圖服務添加動態圖層功能即可。啟用地圖服務的步驟為：

  • 給相應的地圖服務啟用動態工作空間
  • 選擇服務器相應的硬盤地址並賦予其id
  • 將相應位置注冊到ArcGIS Server服務器（保證ArcGIS Server可以訪問數據）
  • 在Web端進行調用

2.1.啟用動態圖層

在本次實例中我們用到的地圖服務為：http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer,如果不知道該服務怎么發布，請看：發布動態地圖服務

  • 我們打開Manager->登錄，找到該服務，點擊功能，選擇允許每次請求修改圖層順序和符號->添加

這里寫圖片描述

  • 硬盤上的數據

這里寫圖片描述

注:D:\myshp文件夾下面有一個shp文件：lunkuoxian.shp

  • 因此我們選擇工作空間類型為：shpfile文件夾，工作空間id在此處取名為my，硬盤路徑：D：\myshp

這里寫圖片描述

  • 點擊確定，重新啟動服務

這里寫圖片描述

這里寫圖片描述

  • 注冊文件夾到服務器

點擊站點->數據存儲->注冊文件夾（因為我們是文件夾，所以是注冊文件夾，如果是數據庫，那么就要注冊數據庫）

這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

  • 在Services Directory 查看動態圖層是否啟用

在瀏覽器輸入：http://localhost:6080/arcgis/rest/services進入Test文件夾，找到我們的地圖服務MyService，點進去，在最下發發現：

這里寫圖片描述

注意動態圖層的地址為：http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/dynamicLayer

2.2.Web端調用

2.2.1 代碼實現

  • 首先我們加載地圖
require(["esri/map", "dojo/dom", "dojo/on", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/layers/TableDataSource", "esri/layers/LayerDataSource", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"], function ( Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer, SimpleMarkerSymbol,SimpleLineSymbol) { var map = new Map("mapDiv"); var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//Test/MyService/MapServer"); map.addLayer(layer1); });
  • 添加一個按鈕（用於添加動態圖層）
<button id="btn">添加動態圖層</button>
  • 1
  • 1
  • 給按鈕添加事件
on(dom.byId("btn"),"click",function(e){ //定義一個數據源 var dataSource = new TableDataSource(); //此處為我們設置的命名空間 dataSource.workspaceId = "my"; //命名空間下面的shp dataSource.dataSourceName = "lunkuoxian.shp"; //定義一個圖層數據源 var layerSource = new LayerDataSource(); //給圖層數據源賦值 layerSource.dataSource = dataSource; //定義一個要素圖層:注意鏈接為動態圖層的地址 var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/dynamicLayer", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], source: layerSource }); //定義線符號 var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3); //定義渲染器 var renderer = new esri.renderer.SimpleRenderer(lineSymbol); //定義渲染器 layer2.setRenderer(renderer); layer2.refresh(); map.addLayer(layer2); })

2.2.2 完整代碼

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <script type="text/javascript"> require(["esri/map", "dojo/dom", "dojo/on", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/layers/TableDataSource", "esri/layers/LayerDataSource", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"], function ( Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol) { var map = new Map("mapDiv"); var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//Test/MyService/MapServer"); map.addLayer(layer1); on(dom.byId("btn"),"click",function(e){ //定義一個數據源 var dataSource = new TableDataSource(); //此處為我們設置的命名空間 dataSource.workspaceId = "my"; //命名空間下面的shp dataSource.dataSourceName = "lunkuoxian.shp"; //定義一個圖層數據源 var layerSource = new LayerDataSource(); //給圖層數據源賦值 layerSource.dataSource = dataSource; //定義一個要素圖層:注意鏈接為動態圖層的地址 var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/dynamicLayer", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], source: layerSource }); //定義線符號 var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3); //定義渲染器 var renderer = new esri.renderer.SimpleRenderer(lineSymbol); //定義渲染器 layer2.setRenderer(renderer); layer2.refresh(); map.addLayer(layer2); }) }); </script> </head> <body> <div id="mapDiv" style="height:600px;"></div> <button id="btn">添加動態圖層</button> </body> </html>

運行結果之前：

這里寫圖片描述

運行結果之后：

這里寫圖片描述

3.動態圖層的屬性查詢

     在真實需求中,我們不僅僅是將shp在地圖中顯示那么簡單，我們往往要查詢該圖層的屬性信息,我們在前面代碼的基礎上添加上屬性查詢。

3.1方法1（通過click直接獲取）

3.1.1代碼實現

  • 給要素圖層添加點擊事件
layer2.on("click", function(evt) { //得到點擊的graphics var graphic=evt.graphic; //得到該屬性信息 var attributes=graphic.attributes; //得到該屬性信息轉換成字符串 var result=jsonUtil.stringify(attributes) //將結果彈出一下 alert(result); //獲得要素圖層的主鍵名稱 })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

3.1.2全部代碼

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <script type="text/javascript"> require(["esri/map", "dojo/dom", "dojo/on", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/layers/TableDataSource", "esri/layers/LayerDataSource", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleLineSymbol","dojo/json", "dojo/domReady!"], function ( Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol,jsonUtil) { var map = new Map("mapDiv"); var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//Test/MyService/MapServer"); map.addLayer(layer1); on(dom.byId("btn"),"click",function(e){ //定義一個數據源 var dataSource = new TableDataSource(); //此處為我們設置的命名空間 dataSource.workspaceId = "my"; //命名空間下面的shp dataSource.dataSourceName = "lunkuoxian.shp"; //定義一個圖層數據源 var layerSource = new LayerDataSource(); //給圖層數據源賦值 layerSource.dataSource = dataSource; //定義一個要素圖層:注意鏈接為動態圖層的地址 var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/dynamicLayer", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], source: layerSource }); //定義線符號 var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3); //定義渲染器 var renderer = new esri.renderer.SimpleRenderer(lineSymbol); //定義渲染器 layer2.setRenderer(renderer); layer2.refresh(); map.addLayer(layer2); layer2.on("click", function(evt) { //得到點擊的graphics var graphic=evt.graphic; //得到該屬性信息 var attributes=graphic.attributes; //得到該屬性信息轉換成字符串 var result=jsonUtil.stringify(attributes) //將結果彈出一下 alert(result); //獲得要素圖層的主鍵名稱 }) }) }); </script> </head> <body> <div id="mapDiv" style="height:600px;"></div> <button id="btn">添加動態圖層</button> </body> </html>

運行結果：

這里寫圖片描述

3.2通過查詢獲得屬性

3.2.1代碼實現

  • 定義一個按鈕（用戶獲得屬性）
<button id="attr">用戶彈出屬性</button>
  • 1
  • 1
  • 給相應的按鈕綁定事件
on(dom.byId("attr"),"click",function(){ //得到要素圖層的主鍵屬性 var idProperty = layer2.objectIdField; //定義查詢參數 var query = new Query(); //是否返回幾何形狀 query.returnGeometry = false; //圖層的主鍵名稱（根據自己要求修改） query.objectIds = [247]; //查詢條件1=1意思是：只根據主鍵查詢，忽略where子句 query.where = "1=1"; //進行查詢 layer2.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){ //因為我們根據主鍵查詢，一定只有一個元素 var graphic=result[0]; //獲得屬性 var attributes=graphic.attributes; //得到該屬性信息轉換成字符串 var result=jsonUtil.stringify(attributes) //將結果彈出一下 alert(result); }); })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

3.2.2全部代碼

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <script type="text/javascript"> require(["esri/map", "dojo/dom", "dojo/on", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/layers/TableDataSource", "esri/layers/LayerDataSource", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleLineSymbol","dojo/json","esri/tasks/query", "dojo/domReady!"], function ( Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol,jsonUtil,Query) { var map = new Map("mapDiv"); var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//Test/MyService/MapServer"); map.addLayer(layer1); on(dom.byId("btn"),"click",function(e){ //定義一個數據源 var dataSource = new TableDataSource(); //此處為我們設置的命名空間 dataSource.workspaceId = "my"; //命名空間下面的shp dataSource.dataSourceName = "lunkuoxian.shp"; //定義一個圖層數據源 var layerSource = new LayerDataSource(); //給圖層數據源賦值 layerSource.dataSource = dataSource; //定義一個要素圖層:注意鏈接為動態圖層的地址 var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/dynamicLayer", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], source: layerSource }); //定義線符號 var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3); //定義渲染器 var renderer = new esri.renderer.SimpleRenderer(lineSymbol); //定義渲染器 layer2.setRenderer(renderer); layer2.refresh(); map.addLayer(layer2); on(dom.byId("attr"),"click",function(){ //得到要素圖層的主鍵屬性 var idProperty = layer2.objectIdField; //定義查詢參數 var query = new Query(); //是否返回幾何形狀 query.returnGeometry = false; //圖層的主鍵名稱（根據自己要求修改） query.objectIds = [247]; //查詢條件1=1意思是：只根據主鍵查詢，忽略where子句 query.where = "1=1"; //進行查詢 layer2.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){ //因為我們根據主鍵查詢，一定只有一個元素 var graphic=result[0]; //獲得屬性 var attributes=graphic.attributes; //得到該屬性信息轉換成字符串 var result=jsonUtil.stringify(attributes) //將結果彈出一下 alert(result); }); }) }) }); </script> </head> <body> <div id="mapDiv" style="height:600px;"></div> <button id="btn">添加動態圖層</button> <button id="attr">用戶彈出屬性</button> </body> </html>

4.補充

4.1 啟用文件地理數據庫三點不同

  • 文件的目錄

這里寫圖片描述

  • 命名空間配置

這里寫圖片描述

  • 注冊文件夾配置

這里寫圖片描述

  • 代碼調用差別

這里寫圖片描述

注意：忽略了要素集的存在，即調用是lunkuoxian，而不是vector.lunkuoxian，調用的時候后面沒有*.shp


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ArcGIS api for javascript——圖層-創建定制的切片圖層類型的圖層 ArcGIS API for JavaScript 入門教程[6] 再講數據——Map類之可操作圖層 使用動態圖層在服務器端渲染 C# ArcEngine二次開發之動態圖層 ArcGIS api for javascript——加入動態地圖 ArcGIS api for javascript——加入兩個動態地圖 ArcGIS API For Javascript之調用動態地圖服務 arcgis api for js 關於layers圖層的理解 arcgis api for js 圖層調用及屬性修改 arcgis api for javascript學習
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM