<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管道線示例</title>
<link rel='stylesheet' />
<script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<body>
<div id="container"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer('container',{mapId: 'bigemap.dc-satellite',});
//畫管道體 參數為半徑
function computeCircle(radius) {
var positions = [];
for (var i = 0; i < 360; i++) {
var radians = bmgl.Math.toRadians(i);
positions.push(
new bmgl.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
);
}
return positions;
}
var redTube = viewer.entities.add({
polylineVolume: {
positions: bmgl.Cartesian3.fromDegreesArray([
104.06061172485352,30.691622364099512,
104.06056880950928,30.688264036271132 ,
104.06374454498291,30.688337846929571 ,
104.06383037567137,30.697157814291458,
104.0710186958313,30.69704710839882 ,
104.07076120376585,30.688190225556248 ,
104.07631874084473,30.686400298443729 ,
104.08073902130127,30.684794871670618 ,
104.08696174621582,30.694390128878513 ,
104.09258365631104,30.691364035337518 ,
104.09039497375487,30.688190225556248 ,
104.0875196456909,30.689629524317517 ,
104.08533096313477,30.686289580212929,
104.09106016159056,30.683521583179978,
104.08915042877197,30.680661236218103,
104.08354997634888,30.68355849032903 ,
104.08108234405518,30.679849251318913,
104.07537460327147,30.682617353621485,
104.07385110855103,30.679959976934466,
104.0744948387146,30.679738525576433,
104.06885147094727,30.671396821317973,
104.0681219100952,30.671729026853139,
104.06837940216063,30.673832968713747 ,
104.05807971954346,30.678520534030415 ,
104.05829429626463,30.656446389991498 ,
104.05305862426756,30.649321049788398,
104.0469217300415,30.646662757292184,
104.0435743331909,30.646293544221333 ,
104.03872489929199,30.64422592497429 ,
104.0386390686035,30.657553908665772 ,
104.03816699981689,30.669182088556568 ,
104.03803825378418,30.676010684831887 ,
104.03868198394774,30.678483624955902 ,
104.04168605804443,30.68309714995188 ,
104.04374599456787,30.685422283012443,
104.04983997344969,30.68700924644352 ,
104.04889583587646,30.690662853784424 ,
104.04820919036865,30.695054380615961 ,
104.04404640197752,30.70158594586032 ,
104.04074192047118,30.705940077083433,
104.03610706329346,30.712065047663003 ,
104.04031276702881,30.712692281732235 ,
104.05112743377686,30.713725364248265 ,
104.05262947082518,30.714278796758435,
104.05584812164305,30.716935228598953,
104.06370162963867,30.707674294968463 ,
104.0639591217041,30.696751892064274 ,
104.06044006347656,30.69704710839882 ,
104.06061172485352,30.691142610134154,
]),
shape: computeCircle(10.0),
material: new bmgl.Color(1, 0, 0, 0.8)
},
});
viewer.zoomTo(viewer.entities);
</script>
</html>