<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel='stylesheet'/>
<script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
#container { position: absolute; top: 0; bottom: 0; width: 100%; }
.bmgl-widget-credits{display:none}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id='container'>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.dc-satellite',infoBox:false,selectionIndicator:false});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
fetch(`/offline_data/cd.geojson`)
.then(response => {return response.json()})
.then(response => {
var fs = response.features[0].geometry.coordinates[0];
var maskspoint = bmgl.Cartesian3.fromDegreesArray(fs.flat())
console.log("myfs",fs);
var area = new bmgl.Entity({
polygon: {
hierarchy: {
// 定義多邊形或孔外邊界的線性環。
positions: bmgl.Cartesian3.fromDegreesArray([
10, 0, 10, 89, 160, 89, 160, 0,
]),
// 一組多邊形層次結構，定義多邊形中的孔。
holes: [
{
positions: maskspoint, //挖空區域
},
],
},
// 填充多邊形的材質
material: bmgl.Color.BLACK.withAlpha(0.9),
},
polyline:{
positions:maskspoint,
material:new bmgl.PolylineGlowMaterialProperty({
glowPower: 0.4,
color: bmgl.Color.fromCssColorString("#44d5ff")
}),
width:4.0,
}
})
viewer.entities.add(area);
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
102.70375083544735,19.17904437967765,
2604621.54260337),
orientation:{
heading: 0.10168873888760643,
pitch: -1.1096225446158865,
roll:0.00042305904671557926,
}
});
})
</script>
</body>
</html