Arcgis api for javascript(3.22版本)官方地址 ：https://developers.arcgis.com/javascript/3/

1. 根据官方示例实现一个简单地图展示功能。

示例代码：

 <!DOCTYPE html>

 <html>

 <head>

     <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">

     <style type="text/css">

         html, body { margin: 0; padding: 0; height: 100%; width: 100%; }

         #viewDiv{ width:100%;height:100%; }

     </style>

     <script src="https://js.arcgis.com/3.22/"></script>

 </head>

 <body>

     <div id="viewDiv"></div>

     <script type="text/javascript">

         require(["esri/map", "dojo/domReady!"], function(Map) {

             var map = new Map("viewDiv", {

                 "basemap": "streets"

             });

         });

     </script>

 </body>

 </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文件引用改成本地地址就可以了，如下图所示：

 <!DOCTYPE html>

 <html>

 <head>

     <link rel="stylesheet" href="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/esri/css/esri.css">

     <style type="text/css">

         html, body { margin: 0; padding: 0; height: 100%; width: 100%; }

         #viewDiv{ width:100%;height:100%; }

     </style>

 </head>

 <body>

     <div id="viewDiv"></div>

     <script src="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/init.js"></script>

     <script type="text/javascript">

         require(["esri/map", "dojo/domReady!"], function(Map) {

             var map = new Map("viewDiv", {

                 "basemap": "streets"

             });

         });

     </script>

 </body>

 </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官方提供有很多种：

　　

Arcgis api for javascript学习笔记(3.2X版本)-初步尝试的更多相关文章

  1. Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作

    1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...

  2. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...

  3. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

  4. Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注

    4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...

  5. Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示

    在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...

  6. Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能

    1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...

  7. Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果

    其实就只是用到了 view.goTo()  函数,再利用 window.setInterval()  函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...

  8. Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注

    1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果

    一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...

随机推荐

  1. POJ 2362 Square DFS

    传送门:http://poj.org/problem?id=2362 题目大意: 给一些不同长度的棍棒,问是否可能组成正方形. 学习了写得很好的dfs 赶紧去玩博饼了.....晚上三个地方有约.... ...

  2. 利用VS安装项目打包软件的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 昨天摸索了一下,发现使用VS安装项目来打包软件还是挺方便的. 1. 创建一个安装项目工程,如下图: 2. 设置工程属性 ...

  3. 如何使stm32程序更好移植, 结构体相当于define

    原创:转载请标注引用地址 如何定义 led1对应于PA8  呢 :对于我一开始学习的方法:: #include "main.h" #define led1      GPIO_Pi ...

  4. MongoDB集群安装与配置2.4.3版本

    mongoDB安装http://www.mongodb.org/downloads拷文件到# cp mongodb-linux-i686-2.4.1.tgz /usr/local/进入目录:# cd ...

  5. Linux 系统 杀Oracle 进程

    Linux 系统 杀Oracle 进程 杀掉进程用此方法比较好,能保证杀得干净,而不是用SQL  alter system kill kill -9 `ps -ef|grep "oracle ...

  6. jquery-8 jquery如何处理css样式

    jquery-8  jquery如何处理css样式 一.总结 一句话总结: 1.如何获取网页的三个高? 1)可视区域的高$(window).height(); 2)文档总高度$(document).h ...

  7. xml传参

    前端调用后端方法时要传递多个参数,在前端js中拼接xml形式的字符串: var args = "<?xml version='1.0' encoding='utf-8' ?>&q ...

  8. ebook https://salttiger.com/category/notification/

    https://salttiger.com/category/notification/ 因为个人精力有限,持续搜集.整理.分享电子书已经占用我大部分业余时间,今后不再给评论区留言的朋友们找书,还希望 ...

  9. [转载]Ocelot简易教程（二）之快速开始1

    Ocelot是为.net core量身定做的,目前是基于 netstandard2.0进行构建的. .NET Core 2.1中如何使用呢? 安装NuGet package 使用nuget安装Ocel ...

  10. mysql的四种启动方式

    查看该版本的相应参数: mysqld --verbose --help     1.mysqld  ./mysqld --defaults-file=/etc/my.cnf --user=mysql ...