实验一:ArcGis For JavaScript 4.10 (1)基础 创建底图,环境的搭建
ArcGis For JavaScript 是使用HTML作为容器,使用JS脚本语言渲染出地图放入其中。
1.创建HTML容器(用于存放地图组件,固定地图区域)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS DevLabs:创建一个JavaScript启动程序</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
2.引入地图所需基础组件库,以及CSS样式(一般企业内部对系统的安全性比高,)
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>
3.敲黑板,划重点 - 编写 Arcgis For javaScript的主要代码。
<script>
require([ //入口
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector" //底图
});
var view = new MapView({
container: "viewDiv", //容器ID,对应DIV的ID
map: map,
center: [-118.71511,34.09042], //中心点坐标
zoom: 11 //初始缩放大小(地图的大小)
});
});
</script>
ArcGis For JavaScript API 底层是采用RequireJS作为模块管理,不了解这种编写风格的可以去看看RequireJS。
1.创建地图入口,引入需要用到的模块。 esri.Map等等是下面需要用到的对象需要在上面引入。
2.创建地图容器,采用官方的默认底图。
3.创建视图把视图绑定到Map容器里,并设置地图一些对应的初始属性。
下面是全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS DevLabs:创建一个JavaScript启动程序</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/req4.10/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511,34.09042],
zoom: 11
});
});
</script>
</html>
最后完成的效果: