前言
引擎下载地址：[添加链接描述](http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=2524)
绘制矩形面，根据矩形宽度高度进行，核心代码会将单位m除以1000转为km
效果
核心代码
handler.setInputAction((e) => {
const widthValue = document.querySelector('.width-value').value / 1000
const lengthValue = document.querySelector('.length-value').value / 1000
const panelPosition = viewer.scene.pickPosition(e.position)
const c = convertion1(panelPosition)
// 计算矩形四个顶点的坐标
var options = { units: 'kilometers' };
var first = turf.destination(c, lengthValue / 2, 90, options);
var second = turf.destination(c, lengthValue / 2, -90, options);
var third = turf.destination(c, widthValue / 2, 0, options);
var forth = turf.destination(c, widthValue / 2, 180, options);
var rectangleVertices = [
[first.geometry.coordinates[0], third.geometry.coordinates[1]], // 北点
[second.geometry.coordinates[0], third.geometry.coordinates[1]], // 南点
[second.geometry.coordinates[0], forth.geometry.coordinates[1]], // 东点
[first.geometry.coordinates[0], forth.geometry.coordinates[1]] // 西点
];
const resultPos = []
rectangleVertices.forEach(t => {
resultPos.push(SuperMap3D.Cartesian3.fromDegrees(t[0], t[1]))
});
if (rectEntity) {
viewer.entities.remove(rectEntity)
rectEntity = null
}
rectEntity = viewer.entities.add({
polygon: {
hierarchy: resultPos,
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(rectEntity)
}, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK)
完整代码
<!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>
<div class="custom-panel"></div>
<div class="tips">
<div>
<span>宽度（米）</span>
<input class="width-value" type="text" value="10000">
</div>
<div>
<span>长度（米）</span>
<input class="length-value" type="text" value="20000">
</div>
</div>
<script type="text/javascript">
let viewer, handler, rectEntity
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)
handler = new SuperMap3D.ScreenSpaceEventHandler(viewer.scene.canvas) // event事件处理程序
handler.setInputAction((e) => {
const widthValue = document.querySelector('.width-value').value / 1000
const lengthValue = document.querySelector('.length-value').value / 1000
const panelPosition = viewer.scene.pickPosition(e.position)
const c = convertion1(panelPosition)
// 计算矩形四个顶点的坐标
var options = { units: 'kilometers' };
var first = turf.destination(c, lengthValue / 2, 90, options);
var second = turf.destination(c, lengthValue / 2, -90, options);
var third = turf.destination(c, widthValue / 2, 0, options);
var forth = turf.destination(c, widthValue / 2, 180, options);
var rectangleVertices = [
[first.geometry.coordinates[0], third.geometry.coordinates[1]], // 北点
[second.geometry.coordinates[0], third.geometry.coordinates[1]], // 南点
[second.geometry.coordinates[0], forth.geometry.coordinates[1]], // 东点
[first.geometry.coordinates[0], forth.geometry.coordinates[1]] // 西点
];
const resultPos = []
rectangleVertices.forEach(t => {
resultPos.push(SuperMap3D.Cartesian3.fromDegrees(t[0], t[1]))
});
if (rectEntity) {
viewer.entities.remove(rectEntity)
rectEntity = null
}
rectEntity = viewer.entities.add({
polygon: {
hierarchy: resultPos,
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(rectEntity)
}, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK)
})
}
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>
本文含有隐藏内容，请 开通VIP 后查看