创建复合地图
这个示例演示了如何使用三个复合 MapView 来创建应用程序，每个复合 MapView 具有不同的空间参考。主视图用于显示48个连续的美国州县，另外两个视图用于展示阿拉斯加和夏威夷（后两个在地理上距离美国主体领土较远，没有接壤）。将鼠标移到州县上可查看相关信息。
每个视图使用相同的地图实例，其中包含一个用 WebGL 渲染的 FeatureLayer。FeatureLayer 的一些特性是可变的，例如可以投影到不同的空间参考。
默认情况下，视图将使用底图的空间参考。如果没有指定底图（这个示例就没有指定底图），则会使用第一个添加的可操作图层的空间参考。显示地将设置视图的空间参考将会覆盖来自可操作图层的空间参考。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Create an app with composite views [beta] - 4.5</title>
<style>
html,
body,
#mainViewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#akViewDiv {
padding: 0;
margin: 0;
height: 225px;
width: 300px;
background-color: rgba(255, 255, 255, 0.9);
}
#hiViewDiv {
padding: 0;
margin: 0;
height: 135px;
width: 200px;
background-color: rgba(255, 255, 255, 0.9);
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
};
</script>
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"dojo/domReady!"
], function(Map, MapView, FeatureLayer, Legend) {
var layer = new FeatureLayer({
portalItem: {
id: "b234a118ab6b4c91908a1cf677941702"
},
outFields: ["NAME", "STATE_NAME", "VACANT", "HSE_UNITS"],
title: "U.S. counties"
});
var map = new Map({
layers: [layer]
});
/*********************************************
* 主视图
********************************************/
var mainView = new MapView({
container: "mainViewDiv",
map: map,
popup: {//设置弹窗
highlightEnabled: false,
dockEnabled: true,
dockOptions: {
breakpoint: false,
position: "top-right"
}
},
extent: {//范围
xmin: -3094834,
ymin: -44986,
xmax: 2752687,
ymax: 3271654,
spatialReference: {
wkid: 5070
}
},
spatialReference: {//空间参考
// NAD_1983_Contiguous_USA_Albers
wkid: 5070
},
ui: {
components: ["attribution"]
}
});
// 添加图例
mainView.ui.add(new Legend({
view: mainView
}), "bottom-right");
/*********************************************
* 阿拉斯加视图
********************************************/
var akView = new MapView({
container: "akViewDiv",
map: map,
extent: {
xmin: 396381,
ymin: -2099670,
xmax: 3393803,
ymax: 148395,
spatialReference: {
wkid: 5936
}
},
spatialReference: {
// WGS_1984_EPSG_Alaska_Polar_Stereographic
wkid: 5936
},
ui: {
components: []
}
});
// 添加到主视图
mainView.ui.add("akViewDiv", "bottom-left");
/*********************************************
* 夏威夷视图
********************************************/
var hiView = new MapView({
container: "hiViewDiv",
map: map,
extent: {
xmin: -342537,
ymin: 655453,
xmax: 231447,
ymax: 1023383,
spatialReference: {
wkid: 102007
}
},
spatialReference: {
// Hawaii_Albers_Equal_Area_Conic
wkid: 102007
},
ui: {
components: []
}
});
// 添加到主视图
mainView.ui.add("hiViewDiv", "bottom-left");
mainView
.then(maintainFixedExtent)
.then(disableNavigation)
.then(disablePopupOnClick)
.then(enableHighlightOnPointerMove);
akView
.then(disableNavigation)
.then(disablePopupOnClick)
.then(enableHighlightOnPointerMove);
hiView
.then(disableNavigation)
.then(disablePopupOnClick)
.then(enableHighlightOnPointerMove);
// 固定视图范围
function maintainFixedExtent(view) {
var fixedExtent = view.extent.clone();
view.on("resize", function() {
view.extent = fixedExtent;
});
return view;
}
var highlight = null;
// 设置鼠标滑过是高亮
function enableHighlightOnPointerMove(view) {
view.whenLayerView(layer).then(function(layerView) {
view.on("pointer-move", function(event) {
view.hitTest(event)
.then(function(r) {
// 移除先前高亮的
if (highlight) {
highlight.remove();
highlight = null;
}
// 如果取到了要素，高亮并弹窗，如果没有，关闭弹窗
var id = null;
if (r.results.length > 0) {
var feature = r.results[0].graphic;
feature.popupTemplate = layer.popupTemplate;
id = feature.attributes.OBJECTID;
highlight = layerView.highlight([id]);
var selectionId = mainView.popup.selectedFeature ?
mainView.popup.selectedFeature.attributes.OBJECTID :
null;
if (highlight && (id !== selectionId)) {
mainView.popup.open({
features: [feature],
updateLocationEnabled: true
});
}
} else {
if (mainView.popup.visible) {
mainView.popup.close();
mainView.popup.clear();
}
}
});
});
});
}
// 禁用视图中的导航操作
function disableNavigation(view) {
view.popup.dockEnabled = true;
// 禁用弹窗的缩放
view.popup.actions = [];
// 当事件触发的时候，阻止默认行为
function stopEvtPropagation(evt) {
evt.stopPropagation();
}
// 禁用鼠标滚轮事件
view.on("mouse-wheel", stopEvtPropagation);
// 禁用双击事件
view.on("double-click", stopEvtPropagation);
// 禁用双击加Ctl
view.on("double-click", ["Control"], stopEvtPropagation);
// 禁用拖拽平移事件
view.on("drag", stopEvtPropagation);
// 禁用拖动加shift
// 急用拖动加shift 加Ctrl
view.on("drag", ["Shift"], stopEvtPropagation);
view.on("drag", ["Shift", "Control"], stopEvtPropagation);
// 禁用旋转和缩放
view.on("key-down", function(evt) {
var prohibitedKeys = ["+", "-", "_", "=", "a", "d"];
var keyPressed = evt.key.toLowerCase();
if (prohibitedKeys.indexOf(keyPressed) !== -1) {
evt.stopPropagation();
}
});
return view;
}
// 禁止用户通过单击打开弹窗
function disablePopupOnClick(view) {
view.on("click", function(event) {
event.stopPropagation();
});
return view;
}
});
</script>
</head>
<body>
<div id="mainViewDiv"></div>
<div id="akViewDiv" class="esri-widget"></div>
<div id="hiViewDiv" class="esri-widget"></div>
</body>
</html>
程序运行效果：
（完）