本节教程主要讲如何创建一个简单的2维MapView
引入ArcGIS JS API
新建 html模板如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.7/esri/css/main.css"/>
<script type="text/javascript" src="https://js.arcgis.com/4.7/"></script>
<title>创建2D 地图</title>
</head>
<body>
</body>
</html>
在<head>标签中的引入了js路劲和css文件，其中的js路径是ArcGIS官方发布地址，css文件是Esri的官方控件和组件样式
载入主要模块
创建新的<script>标签如下
<script type="text/javascript">
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
],function(Map,MapView){
// 创建地图
});
</script>
require()是Dojo中载入JS模块的函数，Dojo的优点之后详细解释
创建地图
在function(Map,MapView)中创建地图
function(Map,MapView){
// 创建地图
// basemap的选项包括：satellite,hybrid,topo,gray,dark-gray,oceans,osm,national-geographic
var map = new Map({
basemap:"streets"
});
});
}
底图类型还包括： 卫星影像，混合图（街道和卫星影像混合）等选项
创建视图
在<body>中新建一个<div>
<body>
<div id="viewDiv"></div>
</body>
然后在function(Map,MapView)中创建地图
var view = new MapView({
container:"viewDiv",
map:map,
zoom:4,
center:[15,65]
});
设置页面CSS
<style type="text/css">
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
最后
用浏览器打开
预览.png
网友评论