【超图 SuperMap3D】【基础API使用示例】51、超图SuperMap3D - 绘制圆

【超图 SuperMap3D】【基础API使用示例】51、超图SuperMap3D - 绘制圆｜椭圆形面标注并将视角定位过去

news2024/11/15 8:49:01

前言

引擎下载地址：[添加链接描述](http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=2524)
绘制圆形或者椭圆形

效果

在这里插入图片描述

核心代码

entity = viewer.entities.add({
	// 圆中心点
  position: { x: -1405746.5243351874, y: 4988274.8462937465, z: 3701200.998415641 },
  ellipse: {
    semiMinorAxis: 10000, // 最大半径 当最大最小半径不一致的时候 绘制的即为椭圆
    semiMajorAxis: 10000, // 最小半径 当最大最小半径一致的时候 绘制的即为圆
    material: SuperMap3D.Color.BLUE.withAlpha(0.5), // 圆形颜色
    outline: true, // height must be set for outline to display
    disableDepthTestDistance: Number.POSITIVE_INFINITY
  }
})
viewer.flyTo(entity)

完整代码

<!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, entity
    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)

        entity = viewer.entities.add({
          position: { x: -1405746.5243351874, y: 4988274.8462937465, z: 3701200.998415641 },
          ellipse: {
            semiMinorAxis: 10000,
            semiMajorAxis: 10000,
            material: SuperMap3D.Color.BLUE.withAlpha(0.5),
            outline: true, // height must be set for outline to display
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        })
        viewer.flyTo(entity)
      })
    }
    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 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]
    }


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

</html>