【超图 SuperMap3D】【基础API使用示例】52、超图SuperMap3D - 绘制点｜线｜多边形面的缓冲区

前言

引擎下载地址：[添加链接描述](http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=2524)
绘制缓冲区主要依赖[turfjs](https://turfjs.org/docs/#buffer)
先根据点线面的数据+turfjs计算得到缓冲区的坐标数据，再行绘制

效果

在这里插入图片描述

完整代码

<!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">
  <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
  <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);
    }

    .tips {
      position: fixed;
      left: 100px;
      top: 200px;
      color: #fff;
    }

    input {
      color: #000;
    }
  </style>
</head>

<body>
  <div id="Container"></div>

  <script type="text/javascript">
    let viewer, handler
    const 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，是否显示导航罗盘控件。隐藏可在初始化场景时设置为false
        animation: true, //是否创建动画小器件，左下角仪表
        contextOptions: {
          contextType: Number(2)  // Webgl2:2  WebGPU:3
        }
      })

      viewer.scenePromise.then(function (scene) {
        init(SuperMap3D, scene, viewer)

        eventHandler()
        drawPointBufferHandler()
        drawLineBufferHandler()
        drawPolygonBufferHandler()

        setTimeout(() => {
          flyTo({
            x: -1520391.2517026903,
            y: 4801874.506984832,
            z: 3926626.7742098756,
            heading: 0.24220323846765268,
            pitch: -1.570572787555335,
            roll: 0,
            duration: 2
          })
        }, 2000);
      })
    }

    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
      }))
    }

    function eventHandler () {
      handler = new SuperMap3D.ScreenSpaceEventHandler(viewer.scene.canvas) // event事件处理程序
      handler.setInputAction((e) => {
        const panelPosition = viewer.scene.pickPosition(e.position)
        console.log(panelPosition);
      }, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK)
    }

    // 绘制点缓冲区
    function drawPointBufferHandler () {
      const point = viewer.entities.add({
        point: {
          color: new SuperMap3D.Color(255, 0, 0, 255),
          pixelSize: 2
        },
        position: { x: -1512322.4558270602, y: 4787938.387670586, z: 3919903.201159994 },
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      })
      const latlng = turf.point(convertion1({ x: -1512322.4558270602, y: 4787938.387670586, z: 3919903.201159994 }))
      const buffered = turf.buffer(latlng, 1, { units: 'kilometers' });
      const result = []
      buffered.geometry.coordinates[0].forEach(c => {
        result.push(convertion2(c[0], c[1]))
      })
      viewer.entities.add({
        polygon: {
          hierarchy: result,
          material: new SuperMap3D.StripeMaterialProperty({
            evenColor: SuperMap3D.Color.BLUE.withAlpha(0.5),
            oddColor: SuperMap3D.Color.BLUE.withAlpha(0.5),
            offset: 0.0,
            repeat: 5.0
          })
        }
      })
    }

    // 绘制线缓冲区
    function drawLineBufferHandler () {
      const poss = [
        { x: -1522237.9046121538, y: 4786234.572753863, z: 3918152.515072906 },
        { x: -1522612.688882305, y: 4786790.672703787, z: 3917332.84709323 }
      ]
      const line = viewer.entities.add({
        polyline: {
          positions: poss, // 曲线 bezierPoss
          material: SuperMap3D.Color.RED,
          width: 3
        },
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      })
      const latlngs = []

      poss.forEach((c) => {
        latlngs.push(convertion1(c))
      })

      const polyline = turf.lineString(latlngs)
      const buffered = turf.buffer(polyline, 100 / 1000, { units: 'kilometers' });
      const result = []
      buffered.geometry.coordinates[0].forEach(c => {
        result.push(convertion2(c[0], c[1]))
      })
      viewer.entities.add({
        polygon: {
          hierarchy: result,
          material: new SuperMap3D.StripeMaterialProperty({
            evenColor: SuperMap3D.Color.BLUE.withAlpha(0.5),
            oddColor: SuperMap3D.Color.BLUE.withAlpha(0.5),
            offset: 0.0,
            repeat: 5.0
          })
        }
      })
      // viewer.flyTo(line)
    }

    // 绘制面缓冲区
    function drawPolygonBufferHandler () {
      const poss = [
        { x: -1512123.7645718136, y: 4793263.7218275955, z: 3913503.8097187434 },
        { x: -1513447.674567177, y: 4792746.065483553, z: 3913627.80841923 },
        { x: -1513407.4898382805, y: 4793516.069820738, z: 3912703.06333416 },
        { x: -1512816.7021667513, y: 4793679.2934803255, z: 3912731.690398276 },
        { x: -1512231.997214621, y: 4793643.150004599, z: 3913000.318535814 },
        { x: -1512123.7645718136, y: 4793263.7218275955, z: 3913503.8097187434 }
      ]
      const polygon = viewer.entities.add({
        polygon: {
          hierarchy: poss,
          material: new SuperMap3D.StripeMaterialProperty({
            evenColor: SuperMap3D.Color.RED,
            oddColor: SuperMap3D.Color.RED,
            offset: 0.0,
            repeat: 5.0
          })
        }
      })

      const latlngs = []

      poss.forEach((c) => {
        latlngs.push(convertion1(c))
      })

      const polygonLatlng = turf.polygon([latlngs])
      const buffered = turf.buffer(polygonLatlng, 100 / 1000, { units: 'kilometers' });
      const result = []
      buffered.geometry.coordinates[0].forEach(c => {
        result.push(convertion2(c[0], c[1]))
      })
      viewer.entities.add({
        polygon: {
          hierarchy: result,
          material: new SuperMap3D.StripeMaterialProperty({
            evenColor: SuperMap3D.Color.BLUE.withAlpha(0.5),
            oddColor: SuperMap3D.Color.BLUE.withAlpha(0.5),
            offset: 0.0,
            repeat: 5.0
          })
        }
      })
    }

    function convertion1 ({ x, y, z }) {
      const ellipsoid = viewer.scene.globe.ellipsoid
      const cartesian3 = new SuperMap3D.Cartesian3(x, y, z)
      const cartographic = ellipsoid.cartesianToCartographic(cartesian3)
      const lat = SuperMap3D.Math.toDegrees(cartographic.latitude)
      const lon = SuperMap3D.Math.toDegrees(cartographic.longitude)
      const alt = cartographic.height
      return [lon, lat]
    }

    function convertion2 (lat, lng) {
      return SuperMap3D.Cartesian3.fromDegrees(lat, lng)
    }

    function flyTo (viewParams) {
      const { x, y, z, heading, pitch, roll, duration } = viewParams
      viewer.camera.flyTo({
        destination: new SuperMap3D.Cartesian3(x, y, z),
        orientation: {
          heading,
          pitch,
          roll
        },
        duration,
        complete: () => {
          console.log('complete');
        },
        cancel: () => {
          console.log('cancel');
        }
      });
    }

    if (typeof SuperMap3D !== 'undefined') {
      window.startupCalled = true
      onload(SuperMap3D)
    }
  </script>
</body>

</html>

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

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

相关文章

《深入Linux内核架构》第3章 内存管理（3）

《深入Linux内核架构》第3章 内存管理（3）

目录 3.3 页表 3.3.1 数据结构 3.3.2 特定于PTE的信息 3.3.3 页表项的创建和操作 3.3 页表 页表作用&#xff1a; 将虚拟地址转换为物理地址。 内核总是使用四级页表。所以如果体系架构只支持两级页表&#xff0c;则需模拟第三和第四级页表。 四级页表&#xff1a; PGD&am…
阅读更多...
pycharm连接服务器运行时找不到文件或目录

pycharm连接服务器运行时找不到文件或目录

选择你要修改的python interpreter 进入下图界面&#xff0c;默认选择的是Deployment configuration,需要将其改成SSH。 再将上图python interpreter path和pycharm helpers path 配置成服务器上相应地址即可。 over
阅读更多...
【Java项目】基于jspssm的高校二手交易平台

【Java项目】基于jspssm的高校二手交易平台

目录 背景 技术简介 系统简介 界面预览 背景 随着互联网技术的不断进步&#xff0c;高校二手交易市场通过网络平台得到了显著的扩展。开发这一平台时&#xff0c;首要任务是深入挖掘并满足用户的实际需求&#xff0c;通过精准把握用户需求来构建一个专门化的高校二手交易系…
阅读更多...
基于Django（python+sql）的校园二手交易系统设计与实现（完整程序+开题报告+论文）

基于Django（python+sql）的校园二手交易系统设计与实现（完整程序+开题报告+论文）

随着互联网的迅猛发展&#xff0c;校园内的二手交易市场也逐渐呈现出蓬勃的发展态势。学生们在校园生活中会产生大量的闲置物品&#xff0c;而其他学生也有可能需要这些物品。本论文研究了校园二手交易系统的需求分析、系统实现和测试三个部分&#xff0c;旨在提高校园二手交易…
阅读更多...
10.测试教程-性能测试loadrunner1

10.测试教程-性能测试loadrunner1

文章目录 1.LoadRunner的安装2.Loadrunner的基本概念3.开发测试脚本3.1录制基本的用户脚本3.2插入事务3.3插入集合点3.4参数化输入3.5插入函数3.6插入检查点3.7运行时设置3.8单机运行测试脚本 4.玩转三个测试工具4.1Virtual User Generator(此处讲解和3.1是一致的)4.2Controlle…
阅读更多...
简单破除github的2FA验证

简单破除github的2FA验证

简单破除github的2FA验证 文章目录 简单破除github的2FA验证&#x1f468;‍&#x1f3eb;Authenticator工具 &#x1f468;‍&#x1f3eb;Authenticator工具 最近使用github的时候发现要搞一个2FA的验证才可以 验证的途径有两种&#xff1a;一种是用手机电话验证&#xff0c;…
阅读更多...
Java基于微信小程序的校园请假系统

Java基于微信小程序的校园请假系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#…
阅读更多...
HTML作业2

HTML作业2

作业1: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>table…
阅读更多...
金三银四面试题（四）：Full GC 和 Minor GC

金三银四面试题（四）：Full GC 和 Minor GC

如何触发Full GC&#xff1f;这是面试中的高频题。同样了解Full GC和Minor GC对于理解Java应用程序的性能和内存管理非常重要。 区分 GC 在此之前&#xff0c;我们要搞清楚&#xff0c;什么是Full GC&#xff0c;什么是Minor GC&#xff1f; Minor GC Minor GC是Java虚拟机…
阅读更多...
Unity构建详解（3）——SBP的依赖计算

Unity构建详解（3）——SBP的依赖计算

【前置知识】 先要搞清楚Asset和Object的关系&#xff0c;可以简单理解为一个Asset对应多个Object。 unity自定义的Asset也要有一个存储的标准&#xff0c;其采用的是YAML&#xff0c;我们看到的所有Unity自定义的Asset格式&#xff0c;例如.prefab&#xff08;预制体&#x…
阅读更多...
基于SSM框架的酒店预订系统

基于SSM框架的酒店预订系统

基于SSM框架的酒店预订系统的设计与实现 摘要 当今世界的互联网信息技术飞速发展&#xff0c;网络化的工作模式已经几乎覆盖到各个工作领域中的业务内&#xff0c;人们的日常生活也渐渐离不开互联网。因此&#xff0c;在当下全国各处的酒店都开始构建起了自己的网络预订系统。…
阅读更多...
Win11文件右键菜单栏完整显示教程

Win11文件右键菜单栏完整显示教程

近日公司电脑升级了win11&#xff0c;发现了一个小麻烦事&#xff0c;如下图&#xff1a; 当我想使用svn或git的时候必须要多点一下&#xff0c;这忍不了&#xff0c;无形之中加大了工作量&#xff01; 于是&#xff0c;菜单全显示教程如下&#xff1a; 第一步&#xff1a;管…
阅读更多...
Java前端控制器模式

Java前端控制器模式

文章目录 以下是Java前端控制器模式的主要组成部分和工作原理&#xff1a;组件与角色&#xff1a;工作流程&#xff1a;应用场景与优势&#xff1a; Java Web应用程序示例 Java前端控制器模式是一种软件设计模式&#xff0c;它在构建基于Java的Web应用程序时特别有用&#xff0…
阅读更多...
基于springboot实现在线拍卖系统项目【项目源码+论文说明】

基于springboot实现在线拍卖系统项目【项目源码+论文说明】

基于springboot实现在线拍卖系统演示 摘要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍…
阅读更多...
2024/3/23打卡数组分割（第14届蓝桥杯）——二项式+快速幂

2024/3/23打卡数组分割（第14届蓝桥杯）——二项式+快速幂

题目 思路 分析该题&#xff0c;要将集合 划分成两个子集 &#xff0c;且两个子集的和都是偶数。 可知&#xff1a;偶数 偶数 偶数&#xff1b;偶数 奇数 奇数&#xff1b;奇数 奇数 偶数&#xff1b; 分析可得&#xff1a;如果该集合的和为奇数&#xff0c;就不能分…
阅读更多...
jQuery实现的会员中心安全修改表单特效代码

jQuery实现的会员中心安全修改表单特效代码

jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码&#xff0c;交易密码&#xff0c;手机号码&#xff0c;实名认证&#xff0c;电子邮箱&#xff0c;安全设置表单&#xff0c;会员表单等设置效果的代码 下载地址 https://www.qqmu.com/2635.html
阅读更多...
卡行领航家用户端是怎么拼团怎么挣钱的？

卡行领航家用户端是怎么拼团怎么挣钱的？

#领航家代理政策/怎么代理/奖金制度/双2.0模式# 全国V&#xff1a;ok1234vip 领航家用户端&#xff1a;0.52费率 一次拼团0.44费率 两次拼团0.36费率 三次拼团0.2费率 ………… 十次拼团&#xff0c;客户每月挣20480 领航家代理端&#xff1a;无押激活返现高达166/台 分润万5-万…
阅读更多...
智慧公厕的全域感知、全网协同、全业务融合和全场景智慧赋能

智慧公厕的全域感知、全网协同、全业务融合和全场景智慧赋能

公共厕所是城市的重要组成部分&#xff0c;为市民提供基本的生活服务。然而&#xff0c;传统的公厕管理模式存在诸多问题&#xff0c;如排队等候时间长、卫生状况差、空气质量差等&#xff0c;严重影响市民的出行和生活质量。为了解决这些问题&#xff0c;智慧公厕应运而生&…
阅读更多...
Spring IOC 容器的加载过程（bean 的创建过程）

Spring IOC 容器的加载过程（bean 的创建过程）

Spring IOC 容器的加载过程&#xff08;bean 的创建过程&#xff09; 配置Bean 通过xml或者是Component Bean 等进行配置 解析Bean,得到BeanDefinition定义对象 通过 BeanDefintionReader 将 bean 进行解析&#xff0c;准备要创建的bean对象的定义对象BeanDefinition,存放到Be…
阅读更多...
ATA-2048高压放大器在医疗中的作用是什么

ATA-2048高压放大器在医疗中的作用是什么

高压放大器在医疗设备和医学应用中发挥着至关重要的作用。它们是一种专用的电子设备&#xff0c;用于放大医学图像和信号&#xff0c;以便医生能够更准确地诊断和治疗病患。下面西安安泰将详细介绍高压放大器的作用、原理和应用领域。 高压放大器是专门设计用于处理医学图像和信…
阅读更多...
最新文章

Copyright @ 2022~2023