arcgis api for js入門開發系列二不同地圖服務展示

01-31

上一篇介紹了arcgis api離線部署，這篇開始正式介紹arcgis api for js開發；想要學習webgis開發，首先得熟悉了解前端技術，比如界面布局設計的html+css，核心的是javascript（js），arcgis api就是js寫的，就是說想要開發gis功能前提下，你得熟悉了解js，不然你連源代碼都看不懂。在這裡，推薦esri官網的arcgis api for js：API Reference Overview；裡面詳細的介紹arcgis api各個類的介紹，還有就是在線例子：Samples | ArcGIS API for JavaScript 3.18；這個也是學習arcgis api的好素材。

好了，進入正題，簡單談談我的開發環境，開發工具：Microsoft Visual Studio 2012，前端技術：html+css+js，後台開發語言：C#，地圖服務來源：arcgisserver以及在線天地圖服務；附上我項目目錄截圖：

1.項目的css目錄，主要是css文件和image文件等；2.核心的js目錄，包括arcgis api的js文件，jquery，地圖開發的js文件，地圖配置文件config以及自定義解析天地圖的圖層類等等；3和4，項目的界面html。

效果圖如下：

下面談談個人認為重要之處，想要了解全部的話，請下載項目源代碼運行看，最後地方提供下載。

（1）map.html

這個頁面是主界面，arcgis api實現地圖的載入顯示功能之前，必須要引用arcgis api必須的css和js文件，引用的地方就是在map.html頁面：

<head>n<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />n<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>n <title>ArcGIS API for JS開發系列示例</title>n <script type="text/javascript">n //配置arcgis拓展解析天地圖服務類引用的路徑n dojoConfig = {n parseOnLoad: true,n packages: [{n name: tdlib,n location: this.location.pathname.replace(//[^/]+$/, "") + "/js/tdlib"n //location: "js/tdlib"n }]n };n </script>n <script type="text/javascript" src="js/jquery/jquery.js"></script>n <link href="Content/map/map-index.css" rel="stylesheet" type="text/css" />n <link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />n <link href="Content/site.css" rel="stylesheet" type="text/css" />n <link rel="stylesheet" href="js/arcgisapi/3.14/dijit/themes/nihilo/nihilo.css" />n <link rel="stylesheet" href="js/arcgisapi/3.14/esri/css/esri.css" />n <script type="text/javascript" src="js/arcgisapi/3.14/init.js"></script>n <script type="text/javascript" src="js/main/map.config.js"></script>n <script type="text/javascript" src="js/main/map.js"></script>n</head>n

其中的tdlib路徑是自定義解析天地圖服務的圖層類目錄；map.config是地圖配置文件，配置一些地圖服務的信息，比如空間參考系、地圖全圖範圍、初始化範圍、lods、地圖服務等等；map.js是開發gis功能的核心js文件，實現地圖的初始化以及圖層載入等等；

（2）tdt.html

這個頁面類似map.html的作用，不過用來解析天地圖服務的頁面，顯示在線天地圖的效果，這裡也是項目的瑕疵地方，為啥用兩個頁面的，因為arcgis地圖服務我用自己本機的，切圖的比例個在線天地圖的不是一致的，所以在map.html展示天地圖不了，所以跳轉另一個頁面來展示了。

（3）map.config

配置地圖的常量信息，可以在代碼需要調用時候共享，一來是避免在代碼裡面寫死，二來是方便實施人員部署項目。

重點說一下lods ，這個是相對瓦片地圖服務來說的，用來設置顯示瓦片地圖服務的級別，這個lods獲取來源你發布的切片地圖服務，不同的切片比例，這裡填寫的信息是不一樣的，這個很關鍵，不然填錯了，底圖顯示不了的。

比如我本機的是：

/* --------------------------------地圖初始信息配置-------------------------------- */nfunction MapConfig() { }nMapConfig.mapInitParams = {n fullExtent: {//全圖範圍n xmin: 121.29585473952106,n ymin: 39.49550677343447,n xmax: 123.05162192862765,n ymax: 139.982938778863684n },n extent: {//初始化範圍n xmin: 120.8696333,n ymin: 38.65953686,n xmax: 123.6199347,n ymax: 40.202622n },n spatialReference: {//地圖空間參考坐標系n wkid: 4326n },n lods: [//針對瓦片的地圖服務的,用來控制瓦片級別的顯示，有時候切片級別太多的話，可以只顯示部分的級別地圖n //resolution scale這些值的獲取參照發布的切片地圖服務詳情n { "level": 0, "resolution": 0.00118973050291514, "scale": 500000 },n { "level": 1, "resolution": 5.9486525145757E-4, "scale": 250000 },n { "level": 2, "resolution": 2.3794610058302802E-4, "scale": 100000 },n { "level": 3, "resolution": 5.710706413992673E-5, "scale": 24000 },n { "level": 4, "resolution": 2.3794610058302804E-5, "scale": 10000 }n ]n}n/*地圖調用*/nMapConfig.vecMapUrl = "http://localhost:6080/arcgis/rest/services/dlsearch/MapServer";//ArcGIS動態服務nMapConfig.imgMapUrl = "http://localhost:6080/arcgis/rest/services/dlMap/MapServer";//ArcGIS切圖服務n

（4）map.js

開發地圖的核心js文件，實現展示地圖，必須創建一個地圖對象：

var map = new esri.Map("map", { logo: false, lods: MapConfig.mapInitParams.lods });//創建一個map對象，然後地圖填充在div容器，通過div的ID（map）來關聯;{}裡面是構造地圖的可選參數設置，logo設置圖標是否顯示，lods是設置瓦片地圖的顯示級別level有哪些，從配置文件config獲取n

默認展示底圖為arcgis的瓦片地圖：

var layer = new esri.layers.ArcGISTiledMapServiceLayer(MapConfig.imgMapUrl);//創建一個ArcGISTiledMapServiceLayer對象，解析arcgis的瓦片服務圖層；MapConfig.imgMapUrl是layer對象的參數，請求發布地圖服務的url，用來獲取地圖服務的數據來渲染n layer.id = "img";//layer的id，用來方便後面獲取getLayer（id)圖層n map.addLayer(layer);//layer添加到地圖map對象n

地圖初始化顯示的範圍：

//設置地圖初始範圍n var initExtent = new esri.geometry.Extent({ xmin: MapConfig.mapInitParams.extent.xmin, ymin: MapConfig.mapInitParams.extent.ymin, xmax: MapConfig.mapInitParams.extent.xmax, ymax: MapConfig.mapInitParams.extent.ymax, spatialReference: MapConfig.mapInitParams.spatialReference });n map.setExtent(initExtent);n

地圖切換思路，來展示不同的地圖服務，這裡我採取的是當前地圖只展示一個layer，即是切換不同地圖服務之前，先刪掉之前存在的圖層；其實也可以採取設置圖層的可見以及隱藏來達到目的的，這樣不用每次都刪掉再添加的思路。

//地圖切換n $("#BasemapToggle img").bind("click", function () {n var type = $(this).attr("id");n if (map.getLayer("img"))n map.removeLayer(map.getLayer("img"));n if (map.getLayer("vec"))n map.removeLayer(map.getLayer("vec"));n //三角形標識切換n switch (type) {n case "imgmap"://載入ArcGIS切圖服務n var layer = new esri.layers.ArcGISTiledMapServiceLayer(MapConfig.imgMapUrl);n layer.id = "img";n map.addLayer(layer);n break;n case "vecmap"://載入ArcGIS動態服務n var layer = new esri.layers.ArcGISDynamicMapServiceLayer(MapConfig.vecMapUrl);n layer.id = "vec";n map.addLayer(layer);n break;n case "tdtmap"://載入天地圖服務n location.href = "tdt.html";//location.href實現客戶端頁面的跳轉 n break;n }n }); n

GIS之家作品：首頁-GIS之家-淘寶網

GIS之家興趣部落：gis之家部落-興趣部落

GIS項目交流群：238339408

GIS之家交流群一：432512093