加载一张基本的网络地图
这个程序将加载一张表示各州意外死亡的网络地图。标记的大小表示每个州的死亡人口总数,颜色表示死亡率。明红色表示死亡的人数多,暗绿色表示死亡人数少。
网络地图来自 ArcGIS Online 或者 ArcGIS for Portal item ,最后转变成了自定义的 Web 应用。
获取网络地图需要 ID。
因为 WebMap 继承了 esri/Map ,所以可以将其设置为 MapView 的 map 属性。
程序完整的源代码:
<!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.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/views/MapView",
"esri/WebMap",
"dojo/domReady!"
], function(
MapView, WebMap
) {
/************************************************************
* 创建一个 WebMap 实例. WebMap 必须引用
* PortalItem ID ,这个 ID 代表 一张保存在
* arcgis.com 或者 一个内置门户网的网络地图
*
* 加载内置门户网的网络地图需要设置 esriConfig.portalUrl.
************************************************************/
var webmap = new WebMap({
portalItem: {
id: "f2e9b762544945f390ca4ac3671cfa72"
}
});
/************************************************************
* 将 MapView 的map属性设置为 webmap
************************************************************/
var view = new MapView({
map: webmap,
container: "viewDiv"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
程序执行效果:
沙箱地址:https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webmap-basic
(完)