【超图 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 = true
  circle.classList.add('active')
  disableMouseOperateHandler()

  function downHandler (e) {
    drawStatus = true
    customPanel.innerHTML = '拖动松开以结束绘制'
    center = viewer.scene.pickPosition(e.position)
  }

  function upHandler () {
    drawStatus = false
    showTooltip = false
    customPanel.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, 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) {
        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.devicePixelRatio

      scene.lightSource.ambientLightColor = new SuperMap3D.Color(0.65, 0.65, 0.65, 1)

      var widget = viewer.Widget

      try {
        //添加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 = false
    let showTooltip = false
    let center, end, radius, circleEntity
    // 绘制圆形
    function startDrawCircleHandler () {
      if (circleEntity) {
        viewer.entities.remove(circleEntity)
        circleEntity = null
      }
      customPanel.innerHTML = '请按下鼠标左键拖拽进行拉框放大操作'
      showTooltip = true
      circle.classList.add('active')
      disableMouseOperateHandler()

      function downHandler (e) {
        drawStatus = true
        customPanel.innerHTML = '拖动松开以结束绘制'
        center = viewer.scene.pickPosition(e.position)
      }

      function upHandler () {
        drawStatus = false
        showTooltip = false
        customPanel.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.translateEventTypes
      initMouseOperate.enableTranslate = viewer.scene.screenSpaceCameraController.enableTranslate
      initMouseOperate.enableTilt = viewer.scene.screenSpaceCameraController.enableTilt
      initMouseOperate.enableZoom = viewer.scene.screenSpaceCameraController.enableZoom
      initMouseOperate.enableRotate = viewer.scene.screenSpaceCameraController.enableRotate
    }

    // 还原鼠标操作
    function resetMouseOperateHandler () {
      viewer.scene.screenSpaceCameraController.tiltEventTypes = initMouseOperate.tiltEventTypes
      viewer.scene.screenSpaceCameraController.lookEventTypes = initMouseOperate.lookEventTypes
      viewer.scene.screenSpaceCameraController.translateEventTypes = initMouseOperate.translateEventTypes
      viewer.scene.screenSpaceCameraController.enableTranslate = initMouseOperate.enableTranslate
      viewer.scene.screenSpaceCameraController.enableTilt = initMouseOperate.enableTilt
      viewer.scene.screenSpaceCameraController.enableZoom = initMouseOperate.enableZoom
      viewer.scene.screenSpaceCameraController.enableRotate = initMouseOperate.enableRotate
      viewer.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 = false
      viewer.scene.screenSpaceCameraController.enableTilt = false
      viewer.scene.screenSpaceCameraController.enableZoom = false
      viewer.scene.screenSpaceCameraController.enableRotate = false
    }

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

</html>