01 创建一个二维地图
随着3.X系列版本新功能的不再增加,终于开始向4.X版本转变,其实说实话还是蛮不想转变的,因为相对于3.X版本的API,4.X版本里面的功能目前为止还是有点少的,但大势所趋,只能硬着头皮转了。
首先,4.X版本开发的基本套路和3.X版本相比是一致的,无非就是创建HTML页面,引用相关模板,然后实例化,最后实现与地图的交互,即操作地图。不过4.X版本的优点就是主打三维这一块,而且目前较新的前端渲染技术等已经融入到了新版本,老版本的话目前官方已经不再增加新功能,只是修复一下bug等,所以学习4.X系列的API开发是大势所趋。
第一个实例,我们来运用4.X版本的API来创建一个二维地图,最终效果如下:
由上图可见,它和老版本创建的地图一模一样,并没有什么不同,但是它其实是有区别的,它的区别就在于创建的过程和老版本并不是一致的,具体过程如下:
1 第一步基本都相同,就是创建HTML页面,然后创建一个div,设置其相应的样式,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to MapView - Create a 2D map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
在这里你可能会自然而然的觉得,这个div是放置地图的,但你错了,它并不是放置地图,而另有他用。
2 我们引入相应的开发包,在此示例中只需要一个init.js和一个css样式文件即可,如下:
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
3 引入相应的开发包之后,我们接下来就要加载所需的模块,然后实例化地图,到目前为止,这些步骤都和老版本中的操作一模一样,大家不难理解,如下:
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView){
var map = new Map({
basemap: "osm"
});
});
</script>
4 细心的同学已经发现了,我创建地图并没有用到之前创建好的div,在这只是指定了一个底图而已,而且除了加载Map这个模版之外,我还加载了一个叫做MapView的模版。
在这就要介绍一下这个MapView了,它是我们今天的主角,也是我们以后的主角。在4.X版本中其实是这样的,你创建一个地图,除此之外你还要创建一个地图视角,我们在这把这个地图视角可以理解为查看地图的眼睛,只有创建了地图视角,将它和地图做绑定,我们才能查看地图,否则是看不到地图的。
所以,接下来我们就要创建地图视角,在此时就要使用我们的div了,如下:
var view = new MapView({
container: "viewDiv", // 查看地图的容器
map: map, // 绑定创建的地图
zoom: 9,
center: [104.071469,30.662036] // 视角中心、观察中心
});
5 地图创建完成,地图视角创建完成,将他俩做完绑定之后我们就可以在前端看到创建的地图了。以下是完整的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to MapView - Create a 2D map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView){
var map = new Map({
basemap: "osm"
});
var view = new MapView({
container: "viewDiv", // 产看地图的容器
map: map, // 绑定创建的地图
zoom: 9,
center: [104.071469,30.662036] // 视角中心、观察中心
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>