<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet'/>
<script src='http://bigemap.com:9000/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://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu',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
源码