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

前言

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

效果

完整代码

html 复制代码

<!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>