Arcgis api for JS 4.x（一）：视图联动

最新推荐文章于 2025-06-16 10:43:01 发布

北冥有鲲跃龙门

最新推荐文章于 2025-06-16 10:43:01 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Arcgis API for JS 4.x 文章标签： Arcgis api 多视图

本文链接：https://blog.youkuaiyun.com/weixin_43155640/article/details/94410760

本文介绍了如何在ArcGIS API 4.x版本中实现视图联动，通过一个按钮切换单视图到双视图，并确保视图间的交互。文章强调在查找API相关资料时注意版本差异，提供了HTML和JS代码示例，包括主副视图的创建、样式设置及事件监听器的编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开始之前，笔者建议大家，在查找arcgis api相关文章时，一定要确定该文章所使用api的版本！！！笔者此前便在各功能被各位前辈3.x的文章搞偏了，而4.x版本教程少之又少，这便边学习边写下这一系列。

本文的例子是以一个button触发，将单视图窗口改成双视图窗口，且视图间联动的例子。闲话少说，实践开始。

1.在html创建主副显示窗口div，用来装视图；

<!--地图显示窗-->
<!--主窗-->
<div id="viewDiv" ></div>
<!--副窗-->
<div id="viewBox" style="display: none;left:50%;width:50%;height:100%; position: fixed">
<div id="viewDiv_1" style="width:100%;height:100%"></div>
</div>

副窗为点击button打开的第二个视图窗。这里的思路是，副窗需要默认将其display属性设为“none”，点击button后更改display属性便可。要注意的是，副窗需多设一个<div>，否则后面会导致副视图不能正常显现（具体原因我不知道，期待有朋友告知）。

另外主视图的style也要进行设置：

 #viewDiv {
      padding:0;
      margin:0;
      height: 100%;
      width: 100%;
      position: fixed;
    }

2.在js写主窗口的map，view，button的监听器；

require处只需Map，MapView两个模块便行。

        //底图
        var map = new Map({
            basemap: "osm"

最低0.47元/天解锁文章

200万优质内容无限畅学