<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://bigemap.com/offline_data/newjunbiao/vue.js"></script>
<link
href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<!-- elementui -->
<script src="http://bigemap.com/offline_data/newjunbiao/elementui.js"></script>
<link
rel="stylesheet"
href="http://bigemap.com/offline_data/newjunbiao/elementui.css"
/>
<script src="/offline_data/turf.min.js"></script>
<title>泰森多邊形</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
}
#baseMap {
width: 100%;
height: 100%;
}
.tools {
position: absolute;
z-index: 9;
top: 40px;
right: 60px;
width: 200px;
height: 40px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
</div>
<script>
window.viewer = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
bmgl.Config.HTTP_URL =
"http://ua.bigemap.com:30081/bmsdk/";
viewer = new bmgl.Viewer("baseMap", {
mapId: "bigemap.dc-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
});
if (
bmgl.FeatureDetection.supportsImageRenderingPixelated()
) {
viewer.resolutionScale =
window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
this.loadTsPolygons();
},
loadTsPolygons() {
var _this = this;
const options = {
bbox: [102.991, 30.092, 104.895, 31.438],
};
const points = turf.randomPoint(40, options);
console.log(points, "Points");
let pt = points.features;
pt.forEach((v, i) => {
let pos = v.geometry.coordinates;
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(
...pos
),
billboard: {
image: "/offline_data/img12.png",
width: 32,
height: 32,
},
label:{
text:`點位${i+1}`,
pixelOffset:new bmgl.Cartesian2(0,-32),
font:"16px 宋體",
fillColor:bmgl.Color.AQUA,
}
});
});
const voronoiPolygons = turf.voronoi(
points,
options
);
console.log(voronoiPolygons, "polygons");
let fs = voronoiPolygons.features;
fs.forEach((v, i) => {
let pos = v.geometry.coordinates[0];
viewer.entities.add({
polygon: {
hierarchy: new bmgl.PolygonHierarchy(
bmgl.Cartesian3.fromDegreesArray(
pos.flat()
)
),
material: bmgl.Color.fromCssColorString(
_this.getRandomHexColor()
).withAlpha(0.8),
},
});
});
viewer.flyTo(viewer.entities);
},
getRandomHexColor() {
const randomValue = Math.floor(
Math.random() * 0xffffff
);
const hexColor = randomValue
.toString(16)
.padStart(6, "0");
return `#${hexColor}`;
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>