ArcGIS for JavaScript学习（一）
一 API准备
- 从网上下载开发包：ArcGIS for JavaScript（百度网盘地址）
sdk中含有API的帮助和例子
2.离线部署（以IIS为例）
配置IIS（详见网络）；解压离线包，包中的install_SDK.html/install_API.html文件含有详细的部署过程。
二 第一个应用程序
- 使用在线api
(1)创建简单的html文档
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
</head>
</html>
(2)在<head>中引入样式表和ArcGIS for JavaScript
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<script src="https://js.arcgis.com/3.17/"></script>
(3)定义页面内容
<body class="claro">
<div id="mapDiv"></div>
</body>
(4)在<head>中加载地图
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("mapDiv", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
});
</script>
(5)设置样式，在<head>中加入如下代码：
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
</style>
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>hello world</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("mapDiv", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
});
</script>
</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>
运行效果如图：
2 使用离线api
将样式表和ArcGIS for JavaScript替换为本地部署的api(由于部署位置不同代码仅供参考)
<link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css">
<script src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
3 加载中国地图， 完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>hello world</title>
<link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
<script>
var map;
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"], function(Map,ArcGISTiledMapServiceLayer){
map = new Map("mapDiv");
var agoServiceURL ="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer";
var tileMap=new ArcGISTiledMapServiceLayer(agoServiceURL);
map.addLayer(tileMap);
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
运行效果如图：
ArcGIS for JavaScript学习（一）的更多相关文章
- ArcGIS for JavaScript学习（二）Server发布服务
一 ArcGIS for Server 安装.配置 (1)双击setup (2)点击下一步完成安装 (3)配置 a 登录Manager 开始—>程序—>ArcGIS—>Manager ...
- arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版
我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...
- Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示
在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...
- Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
- ArcGIS for JavaScript 关于路径开发的一些记录（一）
今年毕业,进入公司的第一个任务就是单独负责一个项目的地图模块,用ArcGIS API for JavaScript来开发web地图.花了大概一个礼拜的时间学会了安装和搭建ArcGIS Server和A ...
- JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- JavaScript学习（3）：函数式编程
在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...
- JavaScript学习（2）：对象、集合以及错误处理
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...
随机推荐
- [编译] 6、开源两个简单且有用的安卓APP命令行开发工具和nRF51822命令行开发工具
星期四, 27. 九月 2018 12:00上午 - BEAUTIFULZZZZ 一.前言 前几天给大家介绍了如何手动搭建安卓APP命令行开发环境和nRF51822命令行开发环境,中秋这几天我把上面篇 ...
- [Swift]LeetCode60. 第k个排列 | Permutation Sequence
The set [1,2,3,...,n] contains a total of n! unique permutations. By listing and labeling all of the ...
- JDBC编程，从入门到精通
今天突然想多说两句,刚刚在知乎看到一个人说,在当今世界,没有技术型驱动的公司,全都是业务型.即便是表面上看似技术型公司,其本质还是为了服务业务.这段话推翻了我以前关于编程的所有看法,觉得颇有道理.下面 ...
- cmd命令窗口的快速选中复制黏贴
右击"窗口标题栏",选择属性,进入属性面板: 在"选项"面板勾选编辑选项下的"快速编辑模式"; 点击确认. 这时鼠标左键就有了选中功能,可以 ...
- linux安装字体方法
1.查看系统中文字体 #fc-list :lang=zh 2.如果提示commont not fount 说明为安装fontconfig 3.安装fontconfig #yum -y install ...
- linux-php5.6-安装sftp扩展
一. 更新gc库,添加libssh2库 yum -y install libstdc libgomp cpp gcc libgfortran libssh2 libssh2-devel gcc-gfo ...
- SpringBoot入门教程(十五)集成Druid
Druid是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0.DBCP.PROXOOL等DB池的优点,同时加入了日志监控,可以很好的监控DB池连接和SQL的执行情况,可以说是针对监控而生的DB ...
- WebApi系列~不支持put和delete请求的解决方法
回到目录 原因 由于安装了webDAV模块引起的,在web.config里的system.webserver节点,将webdav模块移动 将http请求的权限开放 实现 <system.webS ...
- 爬虫入门（四）——Scrapy框架入门：使用Scrapy框架爬取全书网小说数据
为了入门scrapy框架,昨天写了一个爬取静态小说网站的小程序 下面我们尝试爬取全书网中网游动漫类小说的书籍信息. 一.准备阶段 明确一下爬虫页面分析的思路: 对于书籍列表页:我们需要知道打开单本书籍 ...
- Python的协程
什么是协程 协程又叫做微线程,它是在单一线程内通过不断切换执行的.协程的切换不是上下文的切换也就是说不是CPU的执行任务的切换,比如CPU执行一会线程1,然后再执行一会线程2,在多核CPU上,Pyth ...