<!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>
<script src="http://bigemap.com/offline_data/newjunbiao/bmgl-plot.min.js"></script>
<!-- 材質 -->
<script src="http://bigemap.com/offline_data/newjunbiao/material.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%;
background: url("/offline_data/newjunbiao/bg.png") no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
</div>
<script>
let baseArr = [
{
center: [118.76219124501672, 32.04358051185503],
name: "南京市",
},
{
center: [120.29706603467706, 31.576633938997617],
name: "無錫市",
},
{
center: [117.521565, 34.355594],
name: "徐州市",
},
{
center: [119.94228337389308, 31.774860754395682],
name: "常州市",
},
{
center: [120.61541112637781, 31.301559319032933],
name: "蘇州市",
},
{
center: [120.86035434402226, 32.018358395348926],
name: "南通市",
},
{
center: [119.17319545985931, 34.60097336022726],
name: "連云港市",
},
{
center: [118.61251831, 33.09269208],
name: "淮安市",
},
{
center: [120.13497070317564, 33.37900392216486],
name: "鹽城市",
},
{
center: [119.41552514821987, 32.395039950996384],
name: "揚州市",
},
{
center: [119.458183, 32.014028],
name: "鎮江市",
},
{
center: [120.060841, 32.571433],
name: "泰州市",
},
{
center: [118.68392944, 33.99575016],
name: "宿遷市",
},
];
window.onload = () => {
new Vue({
el: "#app",
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
window.viewer = new bmgl.Viewer("baseMap", {
mapId: "bigemap.dc-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode:false,
orderIndependentTranslucency: false,
contextOptions: {
webgl: {
alpha: true,
},
},
});
if (
bmgl.FeatureDetection.supportsImageRenderingPixelated()
) {
window.viewer.resolutionScale =
window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.imageryLayers.removeAll();
viewer.scene.globe.baseColor =
new bmgl.Color.fromCssColorString("#363635"); //替換球體默認藍色
viewer.scene.skyBox.show = false; //隱藏天空盒子
viewer.scene.backgroundColor = new bmgl.Color(
0.0,
0.0,
0.0,
0.0
); //隱藏黑色背景
viewer.scene.globe.baseColor = new bmgl.Color(
0,
0,
0,
0
); //替換球體默認藍色
viewer.scene.globe.enableLighting = false; //隱藏太陽
viewer.shadows = false;
viewer.scene.sun.show = false; //或者viewer.scene.sun.destroy();
viewer.scene.moon.show = false; //隱藏月亮
viewer.scene.skyAtmosphere.show = false; //大氣圈
viewer.scene.fog.enable = false; //霧
viewer.scene.globe.show = false;
// 禁用星光
viewer.scene.skyAtmosphere.show = false;
this.loadborder();
},
//加載行政區域展示
loadborder() {
var _this = this;
bmgl.GeoJsonDataSource.load(
"/offline_data/newjunbiao/jiangsu.geojson"
).then(function (dataSource) {
viewer.dataSources.add(dataSource);
//獲取通過geoJSON相關的API加載的實體對象
let enes = dataSource.entities.values;
enes.forEach((v, i) => {
// 判斷每個實體對象，是否有多邊形
if (v.polygon) {
//設置多邊形的材質，隨機顏色
v.polygon.material =
i % 2 == 0
? bmgl.Color.fromCssColorString(
"#568fd7"
)
: bmgl.Color.fromCssColorString(
"#3357af"
);
// 設置多邊形展示外輪廓
v.polygon.outline = true;
// 設置多邊形外輪廓顏色
v.polygon.outlineColor = bmgl.Color.WHITE;
v.polygon.outlineWidth = 10.0;
v.polygon.extrudedHeight = 2000.0;
}
});
viewer.flyTo(dataSource); // 自動飛到數據范圍
_this.loadCenterpoint();
// viewer.zoomTo(viewer.entities);
});
},
loadCenterpoint() {
baseArr.forEach((v, i) => {
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(
...v.center,
1200
),
label: {
text: v.name,
font: "20px 楷體",
style: bmgl.LabelStyle.FILL_AND_OUTLINE,
fillColor:
bmgl.Color.fromCssColorString(
"#ffffff"
),
pixelOffset: new bmgl.Cartesian2(
0,
-20
),
showBackground: true,
backgroundColor: new bmgl.Color(
0.165,
0.165,
0.165
),
scale: 0.8,
distanceDisplayCondition:
new bmgl.DistanceDisplayCondition(
0,
1400000
),
},
});
});
this.loadFlyLine();
let circleRotate = viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(
119.569702,
33.25247,
),
id: "circleRotateTest",
ellipse: {
semiMinorAxis: 460000.0,
semiMajorAxis: 460000.0,
height:1220,
material:
new bmgl.ImageMaterialProperty({
image: "/offline_data/newjunbiao/kjg.png",
}),
},
});
this.rotateMaterial(
circleRotate.ellipse,
0,
1
);
},
rotateMaterial(instance, _stRotation, _amount) {
instance.stRotation = new bmgl.CallbackProperty(
function () {
_stRotation += _amount;
if (
_stRotation >= 360 ||
_stRotation <= -360
) {
_stRotation = 0;
}
return bmgl.Math.toRadians(_stRotation);
},
false
);
},
//加載飛線效果
loadFlyLine() {
let center = { lon: 119.569702, lat: 33.25247 };
let material =
new bmgl.PolylineTrailLinkMaterialProperty(
bmgl.Color.fromCssColorString("#06d4ff"),
// bmgl.Color.GRAY,
3000
);
for (var j = 0; j < baseArr.length; j++) {
// console.log(baseArr[j]);
let pos = baseArr[j].center;
let points = this.parabolaEquation({
pt1: center,
pt2: { lon: pos[0], lat: pos[1] },
height: 5800,
num: 100,
});
// console.log("points",points);
var pointArr = [];
for (var i = 0; i < points.length; i++) {
pointArr.push(
points[i][0],
points[i][1],
points[i][2]
);
}
viewer.entities.add({
name: "PolylineTrailLink" + j,
polyline: {
positions:
bmgl.Cartesian3.fromDegreesArrayHeights(
pointArr
),
width: 10.0,
material: material,
},
});
}
},
//計算拋物線
parabolaEquation(options, resultOut) {
let h = options.height ? options.height : 5000;
let L =
Math.abs(options.pt1.lon - options.pt2.lon) >
Math.abs(options.pt1.lat - options.pt2.lat)
? Math.abs(
options.pt1.lon - options.pt2.lon
)
: Math.abs(
options.pt1.lat - options.pt2.lat
);
let num =
options.num && options.num > 50
? options.num
: 50;
let result = [];
let dlt = L / num;
if (
Math.abs(options.pt1.lon - options.pt2.lon) >
Math.abs(options.pt1.lat - options.pt2.lat)
) {
//以lon為基準
let delLat =
(options.pt2.lat - options.pt1.lat) / num;
if (options.pt1.lon - options.pt2.lon > 0) {
dlt = -dlt;
}
for (let i = 0; i < num; i++) {
let tempH =
h -
(Math.pow(
-0.5 * L + Math.abs(dlt) * i,
2
) *
4 *
h) /
Math.pow(L, 2);
let lon = options.pt1.lon + dlt * i;
let lat = options.pt1.lat + delLat * i;
result.push([lon, lat, tempH]);
}
} else {
//以lat為基準
let delLon =
(options.pt2.lon - options.pt1.lon) / num;
if (options.pt1.lat - options.pt2.lat > 0) {
dlt = -dlt;
}
for (let i = 0; i < num; i++) {
let tempH =
h -
(Math.pow(
-0.5 * L + Math.abs(dlt) * i,
2
) *
4 *
h) /
Math.pow(L, 2);
let lon = options.pt1.lon + delLon * i;
let lat = options.pt1.lat + dlt * i;
result.push([lon, lat, tempH]);
}
}
if (resultOut != undefined) {
resultOut = result;
}
return result;
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>