0301-二维地图开发-添加基础地图并初始化地图范围
2018-02-08 13:46
274 查看
这个系列会先把二维地图方面的功能介绍完，之后再进入三维地图的介绍。本文是入门的第一篇文章，只需要按着步骤来就可以。
备注：文中出现的IP地址为我自己的IP地址，复制代码时需要调整为你自己的代码。
1. 首先我们需要创建一个标准的HTML页面
2.其次在HTML页面的标签中引用JS文件和CSS文件，一般引用以下两个文件
3. 加载所需要的API模块。ArcGIS JavaScript API是基于dojo开发的地图应用库，所以模块的定义和加载都是基于dojo的标准。在本例子中，我们只需要添加以下几个模块即可：
其中模块dojo/domReady! 的意义是确保HMTL的DOM都已经加载完毕之后再执行后续的回调函数里的代码。模块的加载代码全部放在标签中，这和一般的JS代码开发类似。require函数负责加载模块，格式为：
require (dependencies, factory);
- 第一个参数 dependencies：要加载的模块id数组，模块ID一般是文件名称
- 第二个参数 factory：是一个回调函数。在依赖的模块加载成功后，会执行这个回调函数，它的参数是所有依赖模块的引用。需要注意的是：回调函数的参数次序和数组中的模块加载次序一致，一般来说参数的名称可以自定义，但为了增强代码的可读性，建议采用模块ID作为参数名称。
4. 创建一个地图对象，并添加一个地图服务作为基础地图图层。
5.创建一个二维地图视图(MapView)，并初始化地图范围。
MapView作为二维地图的视图容器，在创建的时候需要引用一个map对象，同时还需要引用一个DIV作为地图的展示区域。
6.定义地图显示区域(DIV)。在上面的代码中有一行是：container: “mapViewDiv”，这里的mapViewDiv需要我们在body标签中定义好，如下：
7.定义样式。页面的全部区域我们都用来显示地图
8.完整上述的代码之后，我们再访问地图就可以看到效果：
我们看到初始化的范围已经定位到了广州。这里需要提醒的一点是，默认的范围对于业务系统来说非常重要，很多刚刚接触地图应用开发的开发者经常踩这个坑。默认的范围很多情况下是用户业务开始或者重点关注的区域，打开地图就能看到希望的区域是每个地图使用者的使用习惯。
9. 完整的代码如下：
10.至此恭喜
b589
你，你已经踏出了地图开发的第一步。
11.充知识点：
View、Map和Layer的逻辑关系如下图所示：
备注：SceneView是三维地图的视图容器，会在后续的章节涉及，可以暂时不用掌握。
MapServer：是一种利用ArcGIS使地图可通过Web进行访问的服务。在ArcGIS中，首先通过 ArcMap 制作地图，然后将地图作为服务发布到 ArcGIS Server 站点中。之后，我们就可以通过网络使用这份地图服务，除了JS API之外，还可以在ArcGIS的其他客户端应用程序譬如：Portal、ArcGIS Desktop、ArcGIS Online 中使用此地图服务。
备注：文中出现的IP地址为我自己的IP地址，复制代码时需要调整为你自己的代码。
1. 首先我们需要创建一个标准的HTML页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> </head> </html>
2.其次在HTML页面的标签中引用JS文件和CSS文件，一般引用以下两个文件
3. 加载所需要的API模块。ArcGIS JavaScript API是基于dojo开发的地图应用库，所以模块的定义和加载都是基于dojo的标准。在本例子中，我们只需要添加以下几个模块即可：
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
// Code to create the map and view will go here
});
</script>其中模块dojo/domReady! 的意义是确保HMTL的DOM都已经加载完毕之后再执行后续的回调函数里的代码。模块的加载代码全部放在标签中，这和一般的JS代码开发类似。require函数负责加载模块，格式为：
require (dependencies, factory);
- 第一个参数 dependencies：要加载的模块id数组，模块ID一般是文件名称
- 第二个参数 factory：是一个回调函数。在依赖的模块加载成功后，会执行这个回调函数，它的参数是所有依赖模块的引用。需要注意的是：回调函数的参数次序和数组中的模块加载次序一致，一般来说参数的名称可以自定义，但为了增强代码的可读性，建议采用模块ID作为参数名称。
4. 创建一个地图对象，并添加一个地图服务作为基础地图图层。
var myMap; //地图对象
require([
"esri/Basemap",
"esri/layers/TileLayer",
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function (Basemap, TileLayer, Map, MapView){
/**
**TileLayer接口负责加载ArcGIS Server发布的MapServer缓存切片服务
**http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer是GeoQ提供的以中国区域为主的缓存切片服务
**TileLayer将作为Basemap对象的一个图层添加到Map对象中。
**/
var layer = new TileLayer({
url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
});
/**
**Basemap:负责管理所有自定义的基础地图
**我们可以把所有的基础地图都放在Basemap对象中
**每个基础地图服务在Basemap对象中都作为一个图层
**/
var customBasemap = new Basemap({
baseLayers: [layer],
title: "基础地图",
id: "gisBasemap"
});
myMap = new Map({
basemap: customBasemap
});
});5.创建一个二维地图视图(MapView)，并初始化地图范围。
var mapView;
mapView = new MapView({
center: [113.293701, 23.096313], //广州的中心经度、维度
container: "mapViewDiv", //地图展示区域，对应页面上的DIV
map: myMap, //MapView包含Map对象
zoom: 10 //初始显示地图级别
});MapView作为二维地图的视图容器，在创建的时候需要引用一个map对象，同时还需要引用一个DIV作为地图的展示区域。
6.定义地图显示区域(DIV)。在上面的代码中有一行是：container: “mapViewDiv”，这里的mapViewDiv需要我们在body标签中定义好，如下：
<body> <div id="mapViewDiv"></div> </body>
7.定义样式。页面的全部区域我们都用来显示地图
<style>
html,
body,
#mapViewDiv {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>8.完整上述的代码之后，我们再访问地图就可以看到效果：
我们看到初始化的范围已经定位到了广州。这里需要提醒的一点是，默认的范围对于业务系统来说非常重要，很多刚刚接触地图应用开发的开发者经常踩这个坑。默认的范围很多情况下是用户业务开始或者重点关注的区域，打开地图就能看到希望的区域是每个地图使用者的使用习惯。
9. 完整的代码如下：
<!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>
<link rel="stylesheet" href="http://192.168.1.144/4.6/esri/css/main.css" />
<style>
html,
body,
#mapViewDiv {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script src="http://192.168.1.144/4.6/dojo/dojo.js"></script>
<script>
var myMap, mapView;
require([
"esri/Basemap",
"esri/layers/TileLayer",
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function (Basemap, TileLayer, Map, MapView){
/**
**TileLayer接口负责加载ArcGIS Server发布的MapServer缓存切片服务
**http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer是GeoQ提供的以中国区域为主的缓存切片服务
**TileLayer将作为Basemap对象的一个图层添加到Map对象中。
**/
var layer = new TileLayer({
url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
});
/**
**Basemap:负责管理所有自定义的基础地图
**我们可以把所有的基础地图都放在Basemap对象中
**每个基础地图服务在Basemap对象中都作为一个图层
**/
var customBasemap = new Basemap({
baseLayers: [layer],
title: "基础地图",
id: "gisBasemap"
});
myMap = new Map({
basemap: customBasemap
});
mapView = new MapView({
center: [113.293701, 23.096313], //广州的中心经度、维度
container: "mapViewDiv", //地图展示区域，对应页面上的DIV
map: myMap, //MapView包含Map对象
zoom: 10 //初始显示地图级别
});
});
</script>
</head>
<body>
<div id="mapViewDiv"></div>
</body>
</html>10.至此恭喜
b589
你，你已经踏出了地图开发的第一步。
11.充知识点：
View、Map和Layer的逻辑关系如下图所示：
备注：SceneView是三维地图的视图容器，会在后续的章节涉及，可以暂时不用掌握。
MapServer：是一种利用ArcGIS使地图可通过Web进行访问的服务。在ArcGIS中，首先通过 ArcMap 制作地图，然后将地图作为服务发布到 ArcGIS Server 站点中。之后，我们就可以通过网络使用这份地图服务，除了JS API之外，还可以在ArcGIS的其他客户端应用程序譬如：Portal、ArcGIS Desktop、ArcGIS Online 中使用此地图服务。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- QGis二次开发基础 -- 添加在线地图服务
- iOS开发零基础教程之UILabel的新初始化方法
- Android 开发基础系列——添加NDK路径
- 高德js_API开发O2O项目客户端地图定位周边检索 定位选址 POI搜索选址 多边形范围指定城市 不再范围不可服务
- PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
- 安卓智能地图开发与实施五：在线基础底图 - ArcGIS Runtime SDK for Android（Version 100.0.0）
- （ios开发）在MapKit地图上添加注释
- Cocos2D-x游戏开发之十五：CCTMXTiledMap地图的基础实例
- Android Map Api 使用和开发(1) 添加地图和界面
- Android Map Api 使用和开发(1) 添加地图和界面
- iOS开发UI基础—13在UIImageView中添加按钮以及Tag的参数说明
- Android开发-百度地图API_v4.1.1-AndroidStudio(四)基础地图
- Android 百度地图开发之地图初始化
- android安卓开发基础小笔记,添加按钮事件,打开新窗体,窗体传值,回传
- ArcGIS API for Silverlight开发入门（2）：一个基础地图实例
- iOS开发之基础类的简单初始化方法
- ArcGIS Engine基础开发教程(5)——学习地图查询
- 百度地图开发API之加载地图和添加地图控件
- ArcGIS API for Silverlight开发入门（2）：一个基础地图实例
- OpenLayers3基础教程之实现地图鹰眼以及地图比例尺的添加