arcgis api for js入门开发系列二不同地图服务展示(含源代码)

时间:2021-09-22 02:16:44

上一篇介绍了arcgis api离线部署,这篇开始正式介绍arcgis api for js开发;想要学习webgis开发,首先得熟悉了解前端技术,比如界面布局设计的html+css,核心的是javascript(js),arcgis api就是js写的,就是说想要开发gis功能前提下,你得熟悉了解js,不然你连源代码都看不懂。在这里,推荐esri官网的arcgis api for js:;里面详细的介绍arcgis api各个类的介绍,还有就是在线例子:;这个也是学习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> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ArcGIS API for JS开发系列示例</title> <script type="text/javascript"> //配置arcgis拓展解析天地图服务类引用的路径 dojoConfig = { parseOnLoad: true, packages: [{ name: tdlib, location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/tdlib" //location: "js/tdlib" }] }; </script> <script type="text/javascript" src="js/jquery/jquery.js"></script> <link href="Content/map/map-index.css" rel="stylesheet" type="text/css" /> <link href="Content/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="Content/site.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="js/arcgisapi/3.14/dijit/themes/nihilo/nihilo.css" /> <link rel="stylesheet" href="js/arcgisapi/3.14/esri/css/esri.css" /> <script type="text/javascript" src="js/arcgisapi/3.14/init.js"></script> <script type="text/javascript" src="js/main/map.config.js"></script> <script type="text/javascript" src="js/main/map.js"></script> </head>

其中的tdlib路径是自定义解析天地图服务的图层类目录;map.config是地图配置文件,配置一些地图服务的信息,比如空间参考系、地图全图范围、初始化范围、lods、地图服务等等;map.js是开发gis功能的核心js文件,实现地图的初始化以及图层加载等等;

(2)tdt.html