4.3是今年3刚出的,因为工作需要,花了点时间学习了下官网上的Sample Code。
1.Get started with MapView (2D)
1.1引用ASJ。首先下载api文件,放到webroot里面,将文件路径调整下,去掉不需要的。
1.2加载模块。在<script>标签中从API中加载特定的模块,话不多说,上代码:
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
// Code to create the map and view will go here
});
</script>
其中:
esri/Map :加载特定的代码创建一个地图
esri/views/MapView :加载2D地图显示的代码
dojo/domReady! :确保在执行代码前DOM可用
ps:dojo最后要加!是因为感叹号表示domReady一个AMD加载插件。(AMD。。。又可以扯好多,就是异步模块定义的缩写,ASJ全是这模式)
dojo同样提供dojo/ready的方法,这两种不同的地方在于http://g00glen00b.be/dojo-domready-vs-ready/。在简单的例子中,dojo/domReady!会被用到,如果你的应用使用了parseOnLoad: true、Dojo Dijits、来自ESRI库中的widgets或者传统dijits,则需要使用dojo/ready。
全局函数require(Dojo提供的)用来加载模块,ESRI的API建立在Dojo之上,利用其模块化代码库和良好的跨浏览器能力。
1.3创建地图
var map = new Map({basemap: "streets"
});
这个函数里面可以写各种地图的属性如 basemap: "streets"
1.4创建2D地图视图
视图的参考节点(?直译reference nodes)如HTML文件中的容器,主要功能是将地图视图嵌入进一个HTML页面。使用方式同上一步创建地图,添加属性。
var view = new MapView({
container: "viewDiv", // 对应一个DOM节点,该节点会作为地图容器
map: map // 对应上一步创建的地图
});
ps:MapView对应2D地图,SceneView对应3D,这个下面再说。
1.5定义界面内容
我们需要的map和view都创建好了,最后在HTML创建一个div,联系起来就ok
<body>
<div id="viewDiv"></div>
</body>
1.6地图容器的样式
如:
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
2.Get started with SceneView(3D)
和2D同理,直接贴代码,可以直接用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with SceneView - Create a 3D map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://127.0.0.1:8080/arcgis_js_api/library/4.3/4.3/esri/css/main.css">
<script src="http://127.0.0.1:8080/arcgis_js_api/library/4.3/4.3/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView){
var map = new Map({
basemap: "streets",
ground: "world-elevation"//3D地图特有
});
var view = new SceneView({
container: "viewDiv",
map: map,
scale: 50000000, //这里设置初始比例尺
center: [-101.17, 21.78]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
3.Load a basic web map
导入一个arcgis.com在线地图,大概是讲怎么调用一个webmap,这种地图需要一个特别的id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Load a basic WebMap - 4.3</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://127.0.0.1:8080/arcgis_js_api/library/4.3/4.3/esri/css/main.css">
<script src="http://127.0.0.1:8080/arcgis_js_api/library/4.3/4.3/init.js"></script>
<script>
require([
"esri/views/MapView",
"esri/WebMap",
"dojo/domReady!"
], function(
MapView, WebMap
) {
var webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: "f2e9b762544945f390ca4ac3671cfa72"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>