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

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

前言

引擎下载地址：[添加链接描述](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 displaydisableDepthTestDistance: 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, entityconst 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) {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 displaydisableDepthTestDistance: 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.ellipsoidconst 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.heightreturn [lon, lat]}if (typeof SuperMap3D !== 'undefined') {window.startupCalled = trueonload(SuperMap3D)}</script>
</body></html>