Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/
1. 根据官方示例实现一个简单地图展示功能。
示例代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css"> 5 <style type="text/css"> 6 html, body { margin: 0; padding: 0; height: 100%; width: 100%; } 7 #viewDiv{ width:100%;height:100%; } 8 </style> 9 <script src="https://js.arcgis.com/3.22/"></script> 10 </head> 11 <body> 12 <div id="viewDiv"></div> 13 <script type="text/javascript"> 14 require(["esri/map", "dojo/domReady!"], function(Map) { 15 var map = new Map("viewDiv", { 16 "basemap": "streets" 17 }); 18 }); 19 </script> 20 </body> 21 </html>
示例截图:
2. Arcgis api for javascript离线部署
引用官网上的资源文件通常请求和加载比较慢,所以离线部署在本地会更好。
第一步:下载 arcgis js api压缩包并解压,有需要的也可以将arcgis js sdk也下载一份。api是我们开发需要的库,sdk是说明文档和例子;
第二步:替换域名 [HOSTNAME_AND_PATH_TO_JSAPI];
找到下面这两个文件,并将文件里面的“[HOSTNAME_AND_PATH_TO_JSAPI]”内容替换成相应的域名(ip地址:端口)
D:\arcgis_js_api\arcgis_js_v320_api\library\3.20\3.20\init.js
D:\arcgis_js_api\arcgis_js_v320_api\library\3.20\3.20\dojo\dojo.js
第三部:将该文件夹作为部署包在IIS或其他服务器进行发布,具体部署方法网上有很多教程;
部署成功后,只需将原来的css和js文件引用改成本地地址就可以了,如下图所示:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/esri/css/esri.css"> 5 <style type="text/css"> 6 html, body { margin: 0; padding: 0; height: 100%; width: 100%; } 7 #viewDiv{ width:100%;height:100%; } 8 </style> 9 </head> 10 <body> 11 <div id="viewDiv"></div> 12 <script src="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/init.js"></script> 13 <script type="text/javascript"> 14 require(["esri/map", "dojo/domReady!"], function(Map) { 15 var map = new Map("viewDiv", { 16 "basemap": "streets" 17 }); 18 }); 19 </script> 20 </body> 21 </html>
3. 示例代码分析
- 创建一个id为"viewDiv"的div作为map对象渲染地图的容器
<div id="viewDiv"></div>
- js在执行过程中可能会用到其他js文件,但是不需要自定义引入相应的js文件。所以如果api中缺少相关文件,可能会出现异常。我们把require那一段代码注释掉,发现引入init.js文件后,会自动动态引入其他js文件。如下图所示:
客户端发送的请求资源信息:
浏览器加载后的dom结构:
- arcgis js 依赖 dojo,所以有必要了解一些常用dojo基本操作。这里先简单说一下require
在老版本中的写法中,对require的作用可能更好理解一点。可以理解为:要new 一个esri.Map对象需要先引入其所在的包 esri.map
<script type="text/javascript">dojo.require("esri.map"); function init() {var map = new esri.Map("viewDiv", {"basemap": "oceans"});}dojo.addOnLoad(init);</script>
而示例中可以看作是老版本的简写。require([],function(){})函数中第一个参数可以看作是要引入的包数组,第二个参数function函数中的参数就是引入包(按顺序)的别名,引入包成功后就会执行该函数。
- basemap参数,即为该地图的底图,可以在此底图上叠加其他图层。basemap官方提供有很多种:
转载于:https://www.cnblogs.com/tracine0513/p/7792542.html
Arcgis api for javascript学习笔记(3.2X版本)-初步尝试相关推荐
- ArcGIS API For JavaScript学习笔记
之前学习ArcGIS API For JavaScript的一些记录,有些是转载的,不过转载的自己有重新做过一遍,这里做个总结,方便后面来学习回顾. 1.ArcGIS API For JavaScri ...
- ArcGIS API for JavaScript学习笔记(1)API本地部署
目录 一.API下载 二.启动IIS功能 三.API离线部署 四.验证离线部署 1.使用记事本创建名为test.html文件,并将其置于C:\inetpub\wwwroot\test文件夹下 2.在浏 ...
- ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记--加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
- ArcGIS API for JavaScript 开发笔记
1.Vue.js 中引入 ArcGIS API for JavaScript 4.x 安装 esri-loader npm install --save esri-loader 引入 ArcGIS A ...
- ArcGIS API for Javascript学习
一.ArcGIS API for Javascript 介绍 ArcGIS API for Javascript 是由美国 Esri 公司推出,跟随ArcGIS 9.3 同时发布的,是Esri 基于d ...
- ArcGIS API for javascript开发笔记(五)——GP服务调用之GP模型的发布及使用详解...
感谢一路走来默默陪伴和支持的你~~~ ----------------欢迎来访,拒绝转载---------------- 关于GP模型的制作请点我! 一.GP发布 ArcGIS Desktop可以作为 ...
- ArcGIS API for Silverlight 学习笔记(1)
学习ArGIS API for Silverlight时间不久,希望记录下自己的心得. ArcGIS API for Microsoft Silverlight在今年三月份发布了1.2版本,它的最新版 ...
- arcgis api for javaScript学习-Measurement
来自弱鸡失望之后觉悟: 之前在使用官方api加自己发布的随便一个地图服务想要使用测量控件Measurement,直接new了该控件来使一致出问题,开始以为是因为我自己发布我的服务并不是web 墨卡托投 ...
- arcgis api for JavaScript学习-Scalebar(比例尺)
Scalebar用于在地图上或者一个指定的HTML节点中显示地图的比例尺信息 Scalebar主要方法: 属性 3.示例: <!DOCTYPE html> <html lang=&q ...
最新文章
- 双 11 的狂欢,干了这碗「流量防控」汤
- django+jquery ajax post csrf 配置
- 第二届中国云计算与SaaS学术会议征文通知
- 全局组、域本地组、通用组到底有什么区别?它们之间的关系如何?
- There are multiple modules with names that only differ in ca
- 前端入行两年--教会了我这些道理
- javaweb通过接口来实现多个文件压缩和下载(包括单文件下载,多文件批量下载)
- js导出的xlsx无法打开_vue将数据导出为excel文件就是如此简单
- 进程间通信 - 整理
- [转]struct 和typedef struct什么区别
- MySQL Workbench 导入导出乱码解决方法
- 软考网络工程师考试大纲
- 如何对计算机c盘进行清理,C盘清理,小编教你怎么给电脑C盘进行清理
- WDF队列分析(3)
- c语言点阵输出字母,单片机C语言程序设计:8X8LED 点阵显示数字
- 联想电脑键盘M,J,K,L,U,I,O,?按键变成0,1,2,3,4,5,6,+的解决方法
- 第4关:挑选以元音字母开头的单词
- std::forward理解
- 年收入过10亿美元,Veeam看好云数据管理
- 标题关于dicom文件的一些像素tag的直译