view的常用属性和方法介绍(arcgis for javascript)

ArcGIS for JavaScript中的视图（view）是一个地图实例类，用于管理地图的显示区域、符号和标注等。通过视图类，可以实现以下功能：

  1. 显示地图：将地图显示在Web页面上。

  2. 缩放：缩放视图到指定的级别。

  3. 平移：在地图上移动视图。

  4. 查询和选择：通过视图可以查询并选择地图上的要素。

  5. 标注管理：在地图上添加和编辑符号和标注。

  6. 监控地图状态：可以通过视图实例读取和监控地图状态，例如当前缩放级别、地图范围和中心点等。

视图实例类可以在ArcGIS for JavaScript的API中使用，使用前需要先创建地图实例，然后再创建对应的视图实例。具体使用方法如下：

  1. 创建地图实例：
var map = new Map({
   basemap: "streets"
});
  1. 创建视图实例：
var view = new MapView({
   container: "viewDiv",
   map: map
});

比如我们创建一个三维地图：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>三维地图</title>
    <style>
      html,
      body,
      #viewDiv {
        position: relative;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>
    <script>
      require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
        const map = new Map({
          basemap: "topo-vector", // 将地图的底图设置为矢量地图
          ground: "world-elevation" // 将地图的地形设置为世界高程服务
        });
        const view = new SceneView({
          container: "viewDiv", // 将创建的div元素赋值给container属性
          map: map, // 将创建的地图对象赋值给map属性
        });
      });
    }
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

在上面的代码中，SceneView是视图实例类，container是Web页面上用于显示地图的容器，map是地图实例。创建视图实例后，可以设置其属性

一、view的常用属性

  1. container
    表示包含视图的 DOM 元素的 或 节点, 就是将将来地图要渲染到web页面的dom容器。
<script>
const view = new SceneView({
   container: "viewDiv", // 将创建的div元素赋值给container属性
 });
</script>
<body>
    <div id="viewDiv"></div>
</body>
  1. map
    map属性需要设置一个new Map()的实例，表示当前地图采用那种底图和模式类型。
const view = new SceneView({
   container: "viewDiv", // 将创建的div元素赋值给container属性
   map: new Map({
          basemap: "topo-vector", // 将地图的底图设置为矢量地图
          ground: "world-elevation" // 将地图的地形设置为世界高程服务
        }),
});
  1. zoom
    表示地图的缩放级别，范围是[1, 20], 值越小表示地图缩的越小，用户看到的地图范围越大。
const view = new SceneView({
   container: "viewDiv", // 将创建的div元素赋值给container属性
   map: new Map({
          basemap: "topo-vector", // 将地图的底图设置为矢量地图
          ground: "world-elevation" // 将地图的地形设置为世界高程服务
        }),
   zoom: 10
});
  1. center
    表示地图中心点，[116.378517,39.865246] // 北京
const view = new SceneView({
   container: "viewDiv", // 将创建的div元素赋值给container属性
   map: new Map({
          basemap: "topo-vector", // 将地图的底图设置为矢量地图
          ground: "world-elevation" // 将地图的地形设置为世界高程服务
        }),
   center: [116.378517,39.865246]
});

如上面代码，在地图初始化时将地图中心点设置为北京：
在这里插入图片描述
5. navigation
这个属性是设置一些鼠标操作地图的限制的

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
        const map = new Map({
          basemap: "topo-vector"
        });
        const view = new MapView({
          container: "viewDiv", // 获取页面中的div元素
          map: map, // 将创建的地图对象赋值给map属性
          zoom: 4, // 设置缩放级别
          center: [15, 65], // 设置中心点
          navigation: {
            gamepad: {
              enabled: false, // 禁止游戏手柄
            },
            browserTouchPanEnabled: false, // 禁止触摸平移
            momentumEnabled: false, // 禁止动量
            mouseWheelZoomEnabled: false, // 禁止鼠标滚轮缩放
          },
        });
      });
  1. ui
    ui属性是设置地图界面用户可以操作的一些小部件，如在地图右下角添加地图切换部件
      let view = null;
      require(["esri/Map", "esri/views/SceneView" ,"esri/widgets/BasemapToggle"], (Map, SceneView, BasemapToggle) => {
        const map = new Map({
          basemap: "topo-vector", // 将地图的底图设置为矢量地图
          ground: "world-elevation", // 将地图的地形设置为世界高程服务
        });
        view = new SceneView({
          container: "viewDiv", // 将创建的div元素赋值给container属性
          map: map, // 将创建的地图对象赋值给map属性
          //   scale: 50000000, // 设置比例尺
          center: [-101.17, 21.78], // 设置中心点
          navigation: {
            gamepad: {
              enabled: true, // 禁止游戏手柄
            },
            browserTouchPanEnabled: false, // 禁止触摸平移
            momentumEnabled: false, // 禁止动量
            mouseWheelZoomEnabled: true, // 禁止鼠标滚轮缩放
          },
        });
        let toggle = new BasemapToggle({
            view: view,
            nextBasemap: "hybrid"
        });
        // 添加底图切换控件
        view.ui.add(toggle, "bottom-right");
}

效果如图：
在这里插入图片描述
添加后可以移动位置：

view.ui.move([ "zoom", toggle ], "bottom-left");

有添加肯定就有删除：

view.ui.empty("bottom-right");
  1. popup
    这个是地图弹框属性，用法如下：
// 显示弹出窗口
view.popup.open({
    title: "Title",
    content: "你好我是弹窗",
    location: view.center,
});

二、view的常用方法

  1. when()
    监听地图加载完之后调用，这里我们可以做一些地图加载完之后的操作，比如重新设置地图中心点和缩放级别等
    在这里插入图片描述
    如图我们结合popup弹框属性，让地图加载完成之后弹个框，代码如下：
      let view = null;
      require(["esri/Map", "esri/views/SceneView" ,"esri/widgets/BasemapToggle"], (Map, SceneView, BasemapToggle) => {
        const map = new Map({
          basemap: "topo-vector", // 将地图的底图设置为矢量地图
          ground: "world-elevation", // 将地图的地形设置为世界高程服务
        });
        view = new SceneView({
          container: "viewDiv", // 将创建的div元素赋值给container属性
          map: map, // 将创建的地图对象赋值给map属性
          //   scale: 50000000, // 设置比例尺
          center: [-101.17, 21.78], // 设置中心点
          navigation: {
            gamepad: {
              enabled: true, // 禁止游戏手柄
            },
            browserTouchPanEnabled: false, // 禁止触摸平移
            momentumEnabled: false, // 禁止动量
            mouseWheelZoomEnabled: true, // 禁止鼠标滚轮缩放
          },
        });
        let toggle = new BasemapToggle({
            view: view,
            nextBasemap: "hybrid"
        });
        // 添加底图切换控件
        view.ui.add(toggle, "bottom-right");

        // 当地图加载完成后执行
        view.when(() => {
          // 显示弹出窗口
          view.popup.open({
            title: "Title",
            content: "你好我是弹窗",
            location: view.center,
          });
        });
      });
  1. goto()
    这个是可以让地图跳转到你设置的地方，如下：
    请添加图片描述
    我们整个按钮，点击之后跳转至对应地方，代码如下：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>三维地图</title>
    <style>
      html,
      body,
      #viewDiv {
        position: relative;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #btn {
        position: absolute;
        top: 30px;
        right: 30px;
        z-index: 50;
        background-color: white;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>
    <script>
      let view = null;
      require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
        const map = new Map({
          basemap: "topo-vector", // 将地图的底图设置为矢量地图
          ground: "world-elevation", // 将地图的地形设置为世界高程服务
        });
        view = new SceneView({
          container: "viewDiv", // 将创建的div元素赋值给container属性
          map: map, // 将创建的地图对象赋值给map属性
          center: [-101.17, 21.78], // 设置中心点
        });
      });
      function goto() {
        view.goTo({
          zoom: 5,
          center: [116.378517, 39.865246],
        });
      }
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <!-- 写一个按钮，绑定goto事件 -->
    <button id="btn" onclick="goto()">goto</button>
  </body>
</html>
  1. on(type, handler)
    监听地图交互事件，type: 地图交互类型，如：‘click’点击， handler：回调函数，用法如下：
// 监听点击事件
        view.on("click", (event) => {
          // 获取当前点击的地方的经纬度
          console.log(event.mapPoint.longitude, event.mapPoint.latitude);
        });

type的值还有’double-click’双击, drag拖拽，key-down按下键，key-up抬起键等

好啦，这就是一些view的常用属性和方法，当然view的属性和方法远远不止这些，感兴趣的朋友可以去官网看看链接如下：
arcgis for javascript之view用法介绍

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/25939.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot 配置文件和日志文件

SpringBoot 配置文件和日志文件

目录 一、SpringBoot配置文件 配置文件的格式 .properties配置文件格式 .yml配置文件格式 .properties 与 .yml的区别 配置文件的读取 .properties 与 .yml的区别 设置不同环境的配置⽂件 二、SpringBoot日志文件 日志打印的步骤 得到日志对象 方法一&#xff1a;使…
阅读更多...
【网络】- 计算机网络体系结构 - OSI七层模型、TCP/IP四层(五层)协议

【网络】- 计算机网络体系结构 - OSI七层模型、TCP/IP四层(五层)协议

目录 一、概述 二、计算机网络体系结构的形成  &#x1f449;2.1 分层的网络体系结构  &#x1f449;2.2 OSI 参考模型  &#x1f449;2.3 TCP/IP - 事实的国际标准 三、OSI 参考模型 四、TCP/IP 协议 一、概述 但凡学习计算机网络知识&#xff0c;肯定绕不过网络协议的&…
阅读更多...
SpringMVC拦截器

SpringMVC拦截器

SpringMVC拦截器 介绍 拦截器&#xff08;interceptor&#xff09;的作用 SpringMVC的拦截器类似于Servlet开发中的过滤器Filter&#xff0c;用于对处理器 进行预处理和后处理 将拦截器按一定的顺序连接成一条链&#xff0c;这条链称为拦截器链&#xff08;Interception Ch…
阅读更多...
hive中如何计算字符串中表达式

hive中如何计算字符串中表达式

比如 select 1(2-3)(-4.1-3.1)-(4-3)-(-3.34.3)-1 col ,1(2-3)(-4.1-3.1)-(4-3)-(-3.34.3)-1 result \ 现在的需求式 给你一个字符串如上述col 你要算出result。 前提式 只有和-的运算&#xff0c;而且只有嵌套一次 -(4-3)没有 -(-4(3-(31)))嵌套多次。 第一步我们需要将运…
阅读更多...
【学习笔记】Python核心技术与实战-基础篇-03列表和元组，到底用哪个？

【学习笔记】Python核心技术与实战-基础篇-03列表和元组，到底用哪个？

目录 列表和元组基础概念区别列表和元组的基础操作和注意事项列表和元组存储方式的差异列表和元组的性能列表和元组的使用场景总结思考题 列表和元组基础 概念 列表和元组&#xff0c;都是一个可以放置任意数据类型的有序集合。 在绝大多数编程语言中&#xff0c;集合的数据类…
阅读更多...
js数据类型和六种运算结果为false的情况

js数据类型和六种运算结果为false的情况

数据类型 number&#xff1a;数字&#xff08;整数、小数、NaN(Not a Number)&#xff09; string&#xff1a;字符串、单双引皆可 boolean&#xff1a;布尔。true、false null&#xff1a;对象为空 undefined&#xff1a;当声明的变量初始化时&#xff0c;该变量的默认值…
阅读更多...
JPEG压缩基本原理

JPEG压缩基本原理

JPEG算法的第一步是将图像分割成8X8的小块。 在计算机中&#xff0c;彩色图像最常见的表示方法是RGB格式&#xff0c;通过R(Red)、G(Green)A和(Blue)组合出各种颜色。 除此以外&#xff0c;还有一种表示彩色图像的方法&#xff0c;称为YUV格式。Y表示亮度&#xff0c;U和V表示…
阅读更多...
Spring第三方bean管理

Spring第三方bean管理

文章目录 1.第三方bean管理1.1 Bean1.2 小结 2.第三方bean依赖注入2.1 简单类型&#xff1a;成员变量2.2 引用类型&#xff1a;方法形参2.3 小结 3.总结 1.第三方bean管理 1.1 Bean 首先看一下目录结构&#xff0c;APP里面就初始化了SpringConfig文件 SpringConifg中就一句话…
阅读更多...
C++11中的智能指针unique_ptr、shared_ptr和weak_ptr详解

C++11中的智能指针unique_ptr、shared_ptr和weak_ptr详解

目录 1、引言 2、什么是智能指针&#xff1f; 3、在Visual Studio中查看智能指针的源码实现 4、独占式指针unique_ptr 4.1、查看unique_ptr的源码实现片段 4.2、为什么unique_ptr的拷贝构造函数和复制函数被delete了&#xff1f;&#xff08;面试题&#xff09; 4.3、使…
阅读更多...
Java网络开发（Tomcat）—— Servlet学习 Web相关背景知识 JavaWeb项目初步

Java网络开发（Tomcat）—— Servlet学习 Web相关背景知识 JavaWeb项目初步

本文目录 引出〇、域名、IP、端口一、软件架构BS和CS二、实现Web服务的条件和步骤三、Tomcat搭建Web项目初步1.pom.xml文件配置2.web.xml文件更新3.Tomcat运行环境配置4.项目文件层级解析 四、JavaWeb项目文件分类&#xff08;1&#xff09;静态文件—存放位置&#xff08;2&am…
阅读更多...
今天面了个字节跳动拿30k出来的测试大佬，让我见识到了什么是天花板

今天面了个字节跳动拿30k出来的测试大佬，让我见识到了什么是天花板

2022年堪称大学生就业最难的一年&#xff0c;应届毕业生人数是1076万。失业率超50%&#xff01; 但是我观察到一个数据&#xff0c;那就是已经就业的毕业生中&#xff0c;计算机通信等行业最受毕业生欢迎&#xff01; 计算机IT行业薪资高&#xff0c;平均薪资是文科其他岗位的…
阅读更多...
【Linux】常用命令的汇总学习

【Linux】常用命令的汇总学习

文章目录 1.目录切换命令2.目录操作命令3.把ls -l中包含字母file&#xff08;不区分大小写&#xff09;的内容输出4.统计txt中的某个字符串5.grep命令的使用6.linux查找当前目录下所有txt文件7.linux中的find命令8.查看系统所有的进程信息9.如何确定文件的类型10.tar解压缩11.U…
阅读更多...
Java数据驱动：CData JDBC Drivers 2022 Crack

Java数据驱动：CData JDBC Drivers 2022 Crack

JDBC 驱动程序 易于使用的 JDBC 驱动程序&#xff0c;具有强大的企业级功能 无与伦比的性能和可扩展性。 对实时数据的简单 JDBC/SQL 访问。 从流行的 BI 工具访问实时数据。 集成到流行的 IDE 中。 CData JDBC Drivers Software 是领先的数据访问和连接解决方​​案提供商。我…
阅读更多...
如何更改 Linux 文件和目录权限？

如何更改 Linux 文件和目录权限？

在Linux系统中&#xff0c;文件和目录权限是安全性和访问控制的关键组成部分。正确设置文件和目录的权限可以确保只有授权的用户能够读取、写入或执行这些文件和目录。 本文将详细介绍如何在Linux系统中更改文件和目录的权限。 1. 文件和目录权限概述 在Linux系统中&#xff…
阅读更多...
【sentinel】漏桶算法在Sentinel中的应用

【sentinel】漏桶算法在Sentinel中的应用

漏桶算法介绍 漏桶算法&#xff0c;又称leaky bucket。 从图中我们可以看到&#xff0c;整个算法其实十分简单。首先&#xff0c;我们有一个固定容量的桶&#xff0c;有水流进来&#xff0c;也有水流出去。对于流进来的水来说&#xff0c;我们无法预计一共有多少水会流进来&am…
阅读更多...
AUTOSAR通信篇 - CAN网络通信（二：CanIf）

AUTOSAR通信篇 - CAN网络通信（二：CanIf）

目录 初始化 数据发送 请求发送 发送数据流 发送缓存 发送确认 数据接收 数据接收提醒 读取接收数据 CAN控制器模式 控制器模式转换 唤醒 PDU通道模式控制 PDU通道组 PDU通道模式 总结 在上一篇&#xff0c;我们介绍了CAN模块&#xff0c;接下来我们介绍在CAN模…
阅读更多...
基于html+css的图展示96

基于html+css的图展示96

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…
阅读更多...
ts报错“this“ 隐式具有类型 “any“，因为它没有类型注释。解决方案

ts报错“this“ 隐式具有类型 “any“，因为它没有类型注释。解决方案

序 1、参考博文》①严格模式 - 知乎&#xff0c;②ts的tsconfig.son中文说明③TypeScript Number | 菜鸟教程 2、解决&#xff08;ts报错“this“ 隐式具有类型 “any“&#xff0c;因为它没有类型注释。&#xff09; 3、解决&#xff08;函数内this是undefined 的问题&#xf…
阅读更多...
STM32CubeIDE + HAL + STM32f103C8T6 系列教程1 ---板载PC13LED闪烁

STM32CubeIDE + HAL + STM32f103C8T6 系列教程1 ---板载PC13LED闪烁

STM32CubeIDE HAL STM32f103C8T6 系列教程1 --- 板载PC13LED闪烁 引言硬件关于开发板[^2]控制器内置存储器原理图 硬件连线硬件连接表硬件连线图 软件STM32CubeIDE下载及安装Stm32CubeIDE设置补全快捷键和主题新建一个工程选择开发板核心芯片型号设置工程相关参数STM32CubeMX…
阅读更多...
《程序员面试金典（第6版）》面试题 02.08. 环路检测（哈希法，双指针，检测链表是否有环）

《程序员面试金典（第6版）》面试题 02.08. 环路检测（哈希法，双指针，检测链表是否有环）

题目描述 给定一个链表&#xff0c;如果它是有环链表&#xff0c;实现一个算法返回环路的开头节点。若环不存在&#xff0c;请返回 null。 题目传送门&#xff1a;面试题 02.08. 环路检测 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链…
阅读更多...
最新文章

Copyright @ 2022~2023