【超图 SuperMap3D】【基础API使用示例】54、超图SuperMap3D -鼠标左键拖拽绘制圆

前言

引擎下载地址：[添加链接描述](http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=2524)
通过左键按下拖拽的方式在地图上进行贴地的圆绘制
完整代码拷贝直接本地运行即可查看效果

效果

在这里插入图片描述

核心代码

// 绘制圆形
function startDrawCircleHandler () {if (circleEntity) {viewer.entities.remove(circleEntity)circleEntity = null}customPanel.innerHTML = '请按下鼠标左键拖拽进行拉框放大操作'showTooltip = truecircle.classList.add('active')disableMouseOperateHandler()function downHandler (e) {drawStatus = truecustomPanel.innerHTML = '拖动松开以结束绘制'center = viewer.scene.pickPosition(e.position)}function upHandler () {drawStatus = falseshowTooltip = falsecustomPanel.style.left = '-10000px'customPanel.style.top = '-10000px'customPanel.style.display = 'none'circle.classList.remove('active')resetMouseOperateHandler()handler.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_DOWN)handler.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_UP)// TODO 调用iserver服务查询// 可参考 https://www.bilibili.com/read/cv22219129/}handler.setInputAction(downHandler, SuperMap3D.ScreenSpaceEventType.LEFT_DOWN)handler.setInputAction(upHandler, SuperMap3D.ScreenSpaceEventType.LEFT_UP)
}// 地图上move操作
function mousemoveHandler (SuperMap3D) {handler.setInputAction((e) => {if (showTooltip) {// 点击的位置显示面板customPanel.style.left = e.endPosition.x + 20 + 'px'customPanel.style.top = e.endPosition.y + 'px'customPanel.style.display = 'block'}if (drawStatus) {end = viewer.scene.pickPosition(e.endPosition)radius = getDistanceHandler(center, end)drawCircleHandler(radius)}}, SuperMap3D.ScreenSpaceEventType.MOUSE_MOVE)
}// 绘制圆
function drawCircleHandler (radius) {if (circleEntity) {circleEntity.ellipse.semiMinorAxis = new SuperMap3D.CallbackProperty(function () {return radius;}, false)circleEntity.ellipse.semiMajorAxis = new SuperMap3D.CallbackProperty(function () {return radius;}, false)} else {circleEntity = viewer.entities.add({position: center,ellipse: {semiMinorAxis: radius,semiMajorAxis: radius,// height: 0,material: SuperMap3D.Color.GREEN.withAlpha(0.5),outline: true, // height must be set for outline to display// clampToGround: true,disableDepthTestDistance: Number.POSITIVE_INFINITY}})}
}

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title></title><link href="https://www.supermapol.com/webgl/Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet"><link href="https://www.supermapol.com/webgl/examples/webgl/css/pretty.css" rel="stylesheet"><link href="https://www.supermapol.com/webgl/examples/webgl/style/colorCorrection.css" rel="stylesheet"><link href="https://www.supermapol.com/webgl/examples/webgl/css/bootstrap-select.min.css" rel="stylesheet"><script src="https://www.supermapol.com/webgl/examples/webgl/js/jquery.min.js"></script><script src="https://www.supermapol.com/webgl/examples/webgl/js/bootstrap.min.js"></script><script src="https://www.supermapol.com/webgl/examples/webgl/js/bootstrap-select.min.js"></script><script src="https://www.supermapol.com/webgl/examples/webgl/js/tooltip.js"></script><script src="https://www.supermapol.com/webgl/examples/webgl/js/slider.js"></script><script src="https://www.supermapol.com/webgl/examples/webgl/js/config.js"></script><script type="text/javascript" src="https://www.supermapol.com/webgl/Build/SuperMap3D/SuperMap3D.js"></script><link rel="stylesheet" href="https://www.supermapol.com/webgl/web/libs/bootstrap/css/bootstrap.min.css"><link href="https://www.supermapol.com/webgl/examples/webgl/style/flood.css" rel="stylesheet"><style>.circle {position: fixed;left: 100px;top: 100px;}.circle.active {color: red;}.custom-panel {position: fixed;left: -1000px;top: -1000px;z-index: 1;border-radius: 10px;display: none;color: #fff;background-color: rgba(0, 0, 0, 0.3);}</style>
</head><body><div id="Container"></div><button class="circle" onclick="startDrawCircleHandler()">绘制</button><div class="custom-panel"></div><script type="text/javascript">let viewer, handlerconst initMouseOperate = {}const customPanel = document.querySelector('.custom-panel')const circle = document.querySelector('.circle')function onload (SuperMap3D) {var EngineType = getEngineType()viewer = new SuperMap3D.Viewer('Container', {navigation: false, // 默认为true，是否显示导航罗盘控件。隐藏可在初始化场景时设置为falseanimation: true, //是否创建动画小器件，左下角仪表contextOptions: {contextType: Number(2)  // Webgl2:2  WebGPU:3}})viewer.scenePromise.then(function (scene) {handler = new SuperMap3D.ScreenSpaceEventHandler(viewer.scene.canvas) // event事件处理程序init(SuperMap3D, scene, viewer)mousemoveHandler(SuperMap3D)setInitOperateInfoHandler()})}function init (SuperMap3D, scene, viewer) {viewer.imageryLayers.addImageryProvider(new SuperMap3D.BingMapsImageryProvider({url: 'https://dev.virtualearth.net',mapStyle: SuperMap3D.BingMapsStyle.AERIAL,key: URL_CONFIG.BING_MAP_KEY//当场景出现黑球时可至官网（https://www.bingmapsportal.com/）申请key}))viewer.resolutionScale = window.devicePixelRatioscene.lightSource.ambientLightColor = new SuperMap3D.Color(0.65, 0.65, 0.65, 1)var widget = viewer.Widgettry {//添加S3M图层服务var promise = scene.open(URL_CONFIG.SCENE_XGPARK)SuperMap3D.when(promise, function (layers) {setInitCameraViewHandler()}, function (e) {errorPanelHandler(widget, e)})}catch (e) {errorPanelHandler(widget, e)}}let drawStatus = falselet showTooltip = falselet center, end, radius, circleEntity// 绘制圆形function startDrawCircleHandler () {if (circleEntity) {viewer.entities.remove(circleEntity)circleEntity = null}customPanel.innerHTML = '请按下鼠标左键拖拽进行拉框放大操作'showTooltip = truecircle.classList.add('active')disableMouseOperateHandler()function downHandler (e) {drawStatus = truecustomPanel.innerHTML = '拖动松开以结束绘制'center = viewer.scene.pickPosition(e.position)}function upHandler () {drawStatus = falseshowTooltip = falsecustomPanel.style.left = '-10000px'customPanel.style.top = '-10000px'customPanel.style.display = 'none'circle.classList.remove('active')resetMouseOperateHandler()handler.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_DOWN)handler.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_UP)// TODO 调用iserver服务查询// 可参考 https://www.bilibili.com/read/cv22219129/}handler.setInputAction(downHandler, SuperMap3D.ScreenSpaceEventType.LEFT_DOWN)handler.setInputAction(upHandler, SuperMap3D.ScreenSpaceEventType.LEFT_UP)}// 地图上move操作function mousemoveHandler (SuperMap3D) {handler.setInputAction((e) => {if (showTooltip) {// 点击的位置显示面板customPanel.style.left = e.endPosition.x + 20 + 'px'customPanel.style.top = e.endPosition.y + 'px'customPanel.style.display = 'block'}if (drawStatus) {console.log('move');console.log(viewer.scene.pickPosition(e.endPosition));end = viewer.scene.pickPosition(e.endPosition)radius = getDistanceHandler(center, end)drawCircleHandler(radius)}}, SuperMap3D.ScreenSpaceEventType.MOUSE_MOVE)}// 绘制圆function drawCircleHandler (radius) {if (circleEntity) {circleEntity.ellipse.semiMinorAxis = new SuperMap3D.CallbackProperty(function () {return radius;}, false)circleEntity.ellipse.semiMajorAxis = new SuperMap3D.CallbackProperty(function () {return radius;}, false)} else {circleEntity = viewer.entities.add({position: center,ellipse: {semiMinorAxis: radius,semiMajorAxis: radius,// height: 0,material: SuperMap3D.Color.GREEN.withAlpha(0.5),outline: true, // height must be set for outline to display// clampToGround: true,disableDepthTestDistance: Number.POSITIVE_INFINITY}})}}// 计算两点之间的距离\半径function getDistanceHandler (center, end) {// 创建两个世界坐标点const point1 = new SuperMap3D.Cartesian3(center.x, center.y, center.z);const point2 = new SuperMap3D.Cartesian3(end.x, end.y, end.z);// 计算两点之间的距离return SuperMap3D.Cartesian3.distance(point1, point2);}// 设置相机视角，便于查看模型function setInitCameraViewHandler () {viewer.scene.camera.setView({destination: new SuperMap3D.Cartesian3.fromDegrees(114.2158, 22.4169, 419),orientation: {up: new SuperMap3D.Cartesian3(-0.1629169048778112, 0.7143202157541026, 0.6805914424014209),direction: new SuperMap3D.Cartesian3(0.5945902470233576, -0.4793925407032518, 0.6454806194323606),heading: 5.899584294129949}})}// 错误面板function errorPanelHandler (widget, e) {if (widget._showRenderLoopErrors) {var title = '渲染时发生错误，已停止渲染。'widget.showErrorPanel(title, undefined, e)}}// 记录存储初始化时的操作信息function setInitOperateInfoHandler () {initMouseOperate.zoomEventTypes = JSON.parse(JSON.stringify(viewer.scene.screenSpaceCameraController.zoomEventTypes))initMouseOperate.tiltEventTypes = JSON.parse(JSON.stringify(viewer.scene.screenSpaceCameraController.tiltEventTypes))initMouseOperate.lookEventTypes = JSON.parse(JSON.stringify(viewer.scene.screenSpaceCameraController.lookEventTypes))initMouseOperate.translateEventTypes = viewer.scene.screenSpaceCameraController.translateEventTypesinitMouseOperate.enableTranslate = viewer.scene.screenSpaceCameraController.enableTranslateinitMouseOperate.enableTilt = viewer.scene.screenSpaceCameraController.enableTiltinitMouseOperate.enableZoom = viewer.scene.screenSpaceCameraController.enableZoominitMouseOperate.enableRotate = viewer.scene.screenSpaceCameraController.enableRotate}// 还原鼠标操作function resetMouseOperateHandler () {viewer.scene.screenSpaceCameraController.tiltEventTypes = initMouseOperate.tiltEventTypesviewer.scene.screenSpaceCameraController.lookEventTypes = initMouseOperate.lookEventTypesviewer.scene.screenSpaceCameraController.translateEventTypes = initMouseOperate.translateEventTypesviewer.scene.screenSpaceCameraController.enableTranslate = initMouseOperate.enableTranslateviewer.scene.screenSpaceCameraController.enableTilt = initMouseOperate.enableTiltviewer.scene.screenSpaceCameraController.enableZoom = initMouseOperate.enableZoomviewer.scene.screenSpaceCameraController.enableRotate = initMouseOperate.enableRotateviewer.scene.screenSpaceCameraController.zoomEventTypes = initMouseOperate.zoomEventTypes}// 禁止鼠标操作function disableMouseOperateHandler () {viewer.scene.screenSpaceCameraController.zoomEventTypes = []viewer.scene.screenSpaceCameraController.tiltEventTypes = []viewer.scene.screenSpaceCameraController.lookEventTypes = []viewer.scene.screenSpaceCameraController.translateEventTypes = []viewer.scene.screenSpaceCameraController.enableTranslate = falseviewer.scene.screenSpaceCameraController.enableTilt = falseviewer.scene.screenSpaceCameraController.enableZoom = falseviewer.scene.screenSpaceCameraController.enableRotate = false}if (typeof SuperMap3D !== 'undefined') {window.startupCalled = trueonload(SuperMap3D)}</script>
</body></html>

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

探析Zoho Projects项目管理系统功能优势

探析Zoho Projects项目管理系统功能优势

世上万物&#xff0c;都是有难有易&#xff0c;有简单&#xff0c;也有复杂&#xff0c;项目也不例外。面对复杂的项目&#xff0c;应该如何有效管理呢&#xff1f;答案无疑是项目管理系统&#xff0c;项目管理系统有哪些强大的功能&#xff1f;Zoho Projects项目管理系统的功能…
阅读更多...
Kafka重要配置参数全面解读(重要)

Kafka重要配置参数全面解读(重要)

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Kafka重要配置参数全面解读(重要 前言auto.create.topics.enableauto.leader.rebalance.enablelog.retention.{hour|minutes|ms}offsets.topic.num.partitions 和 offsets.topic.replication.factorlo…
阅读更多...
Mapper4一键生成

Mapper4一键生成

新建一个Maven工程作为父工程 1、新建一个Maven项目 JDK版本&#xff1a;17 Maven版本&#xff1a;3.6.3 2、总父工程 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"…
阅读更多...
免费翻译pdf格式论文

免费翻译pdf格式论文

进入谷歌翻译网址https://translate.google.com/?slauto&tlzh-CN&opdocs 将需要全文翻译的pdf放进去 选择英文到中文&#xff0c;然后点击翻译 可以选择打开译文或者下载译文&#xff0c;下载译文会下载到电脑上&#xff0c;打开译文会在浏览器打开。
阅读更多...
docker部署ubuntu

docker部署ubuntu

仓库&#xff1a; https://hub.docker.com/search?qUbuntu 拉一个Ubuntu镜像 docker pull ubuntu:18.04 查看本地镜像&#xff1a; docker images 运行容器 docker run -itd --name ubuntu-18-001 ubuntu:18.04 通过ps命令可以查看正在运行的容器信息 docker ps 进入容器 最…
阅读更多...
Redis中的事件(一)

Redis中的事件(一)

事件 概述 Redis服务器是一个事件驱动程序:服务器需要处理以下两类事件: 1.文件事件(file event):Redis服务器通过套接字与客户端(或者其他Redis服务器)进行连接&#xff0c;而文件事件就是服务器对套接字操作的抽象。服务器与客户端(或者其他服务器)的通信会产生相应的文件…
阅读更多...
【VMware Workstation】公司所有主机和虚拟机ip互通，以及虚拟机目录迁移

【VMware Workstation】公司所有主机和虚拟机ip互通，以及虚拟机目录迁移

文章目录 1、场景2、环境3、实战3.1、所有主机和虚拟机ip互通Stage 1 : 【虚拟机】设置为桥接模式Stage 2 : 【虚拟机】设置ipStage 3 : 【路由器】ARP 静态绑定MACStage 3-1 ping 路由器 ipStage 3-2 【静态绑定】虚拟机查看mac地址Stage 3-3 【静态绑定】路由器ARP 静态绑定 …
阅读更多...
Apache HBase(二)

Apache HBase(二)

目录 一、Apache HBase 1、HBase Shell操作 1.1、DDL创建修改表格 1、创建命名空间和表格 2、查看表格 3、修改表 4、删除表 1.2、DML写入读取数据 1、写入数据 2、读取数据 3、删除数据 2、大数据软件启动 一、Apache HBase 1、HBase Shell操作 先启动HBase。再…
阅读更多...
buy me a btc 使用数字货币进行打赏赞助

buy me a btc 使用数字货币进行打赏赞助

最近在调研使用加密货币打赏的平台&#xff0c;发现idatariver平台 https://idatariver.com 推出的buymeabtc功能刚好符合使用场景&#xff0c;下图为平台的演示项目, 演示项目入口 https://buymeabtc.com/idatariver 特点 不少人都听说过buymeacoffee&#xff0c;可以在上面发…
阅读更多...
跑通飞浆平台的MTMCT 跨镜跟踪示例

跑通飞浆平台的MTMCT 跨镜跟踪示例

想跑通飞浆平台的MTMCT跨镜跟踪示例&#xff0c;真的是难上加难啊&#xff01; 改了几处代码&#xff0c;可以顺利跑通了&#xff0c;特此记录&#xff1a; 第一处&#xff1a;不要拉主线的代码&#xff0c;改成 !git clone https://gitee.com/paddlepaddle/PaddleDetection…
阅读更多...
【1】网络协议基础概念

【1】网络协议基础概念

【1】网络协议基础知识 1、互联网2、为什么要学习网络协议3、学习中需要搭建的环境4、客户端-服务器5、Java 的跨平台原理6、C/C的跨平台原理7、一个简单的SpringBoot项目(1) pom.xml(2) application.yml(3) NetworkStudyApp.java(4) SwaggerConfig.java(5) HelloWorldControll…
阅读更多...
PythonGUI应用：模拟航空订票小程序

PythonGUI应用：模拟航空订票小程序

在本教程中&#xff0c;我们将创建一个基本的航空订票管理系统GUI应用&#xff0c;用户可以通过图形界面执行各种操作。我们将使用Python编程语言和Tkinter库来实现此应用。 功能概述&#xff1a; 航班管理&#xff1a; 用户可以添加新的航班&#xff0c;输入航班号、起始地、目…
阅读更多...
x86架构中的寄存器和常用指令

x86架构中的寄存器和常用指令

寄存器 这些寄存器可以用于多种操作&#xff0c;如算术运算、数据传输等。在 x86 架构中&#xff0c;这些包括&#xff1a; 通用 这些寄存器可以用于多种操作&#xff0c;如算术运算、数据传输等 AX/EAX/RAX&#xff1a;累加器&#xff0c;用于算术运算。通常用于存储函数调…
阅读更多...
Java中有哪些容器(集合类)？

Java中有哪些容器(集合类)？

Java中的集合类主要由Collection和Map这两个接口派生而出&#xff0c;其中Collection接口又派生出三个子接 口&#xff0c;分别是Set、List、Queue。所有的Java集合类&#xff0c;都是Set、List、Queue、Map这四个接口的实现 类&#xff0c;这四个接口将集合分成了四大类&#…
阅读更多...
从姿态估计到3D动画

从姿态估计到3D动画

在本文中&#xff0c;我们将尝试通过跟踪 2D 视频中的动作来渲染人物的 3D 动画。 在 3D 图形中制作人物动画需要大量的运动跟踪器来跟踪人物的动作&#xff0c;并且还需要时间手动制作每个肢体的动画。 我们的目标是提供一种节省时间的方法来完成同样的任务。 我们对这个问题…
阅读更多...
YOLOv9 实现多目标跟踪

YOLOv9 实现多目标跟踪

YOLOv9项目结合了YOLOv9的快速目标检测能力和DeepSORT的稳定跟踪能力&#xff0c;实现了对视频流中多个对象的实时、准确检测和跟踪。在具体应用中&#xff0c;该项目能够对视频中的行人、车辆或其他物体进行实时定位、识别和持续跟踪&#xff0c;即使在复杂环境、对象互相遮挡…
阅读更多...
Unity照片墙简易圆形交互效果总结

Unity照片墙简易圆形交互效果总结

还要很多可以优化的点地方&#xff0c;有兴趣的可以做 比如对象的销毁和生成可以做成对象池&#xff0c;走到最左边后再移动到最右边循环利用 分析过程文件&#xff0c;采用Blender&#xff0c;资源已上传&#xff0c;可以播放动画看效果&#xff0c;下面截个图&#xff1a; …
阅读更多...
如何使用 ArcGIS Pro 制作三维建筑

如何使用 ArcGIS Pro 制作三维建筑

三维地图已经逐渐成为未来地图的趋势&#xff0c;对于大范围应用&#xff0c;只需要普通的建筑体块就行&#xff0c;如果有高程数据&#xff0c;还可以结合地形进行显示&#xff0c;这里为大家介绍一下 ArcGIS Pro 制作三维建筑的方法&#xff0c;希望能对你有所帮助。 数据来…
阅读更多...
单片机之串口通信

单片机之串口通信

目录 串口介绍 通信的基本概念 并行通信和串行通信 同步通信和异步通信 串行异步通信方式 串行同步通信方式 通信协议 单片机常见通信接口 串行通信三种模式 串口参数 传输速度 ​串口的连接 电平标准 串行口的组成 串口数据缓冲寄存器 串行口控制寄存器 串口…
阅读更多...
HackTheBox-Machines--Legacy

HackTheBox-Machines--Legacy

文章目录 1 端口扫描2 测试思路3 445端口漏洞测试4 flag Legacy 测试过程 1 端口扫描 nmap -sC -sV 10.129.227.1812 测试思路 目标开启了135、139、445端口&#xff0c;445 SMB服务存在很多可利用漏洞&#xff0c;所以测试点先从445端口开始。而且在Nmap扫描结果中&#xff0c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023