import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
|
// 属性参数，将覆盖config.json中的对应配置
|
export const mapOptions = {
|
scene: {
|
center: { lat: 36.045934, lng: 113.942816, alt: 1663, heading: 2, pitch: -25 }
|
}
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
let pointLayer
|
let textLayer
|
let polyLineLayer
|
let lineGraphic
|
let polyline1
|
let polyline2
|
let contourLine
|
|
// 山顶点
|
export function workPoint1Sdd() {
|
clearPoint()
|
clearLine()
|
map.centerAt({ y: 36.061395, x: 113.94298, alt: 1903, heading: 0, pitch: -57.5 })
|
const arrPoint = [
|
[113.944168, 36.071057, 536.1],
|
[113.939593, 36.072087, 510.42],
|
[113.942957, 36.067383, 462.29],
|
[113.949512, 36.07117, 460.67]
|
]
|
|
pointLayer = createArrPoint(arrPoint) // 添加点
|
textLayer = createArrText(arrPoint, "山顶点") // 添加注记
|
}
|
|
// 特征点：鞍部点
|
export function workPoint2Abd() {
|
clearPoint()
|
clearLine()
|
// 视角定位
|
map.centerAt(
|
{
|
y: 36.06062,
|
x: 113.942836,
|
z: 1351,
|
heading: 0,
|
pitch: -43.5
|
},
|
{
|
complete: () => {
|
startRotatePoint()
|
setTimeout(() => {
|
stopRotatePoint()
|
}, 6000)
|
}
|
}
|
)
|
|
const arrPoint = [
|
[113.943496, 36.068508, 449.63],
|
[113.941962, 36.071444, 481.09],
|
[113.948862, 36.071282, 453.99]
|
]
|
pointLayer = createArrPoint(arrPoint)
|
textLayer = createArrText(arrPoint, "鞍部点") // 添加注记
|
}
|
|
// 特征点：坡度变换点
|
export function workPoint3Pdbhd() {
|
clearPoint()
|
clearLine()
|
// 视角定位
|
map.centerAt({ y: 36.062523, x: 113.946202, z: 1343.59, heading: 353.6, pitch: -42, roll: 0 })
|
|
const arrPoint = [
|
[113.945927, 36.069593, 431.33],
|
[113.94593, 36.073602, 427.86],
|
[113.942159, 36.072318, 443.86],
|
[113.940766, 36.0693, 389.26]
|
]
|
pointLayer = createArrPoint(arrPoint)
|
textLayer = createArrText(arrPoint, "坡度变换点") // 添加注记
|
}
|
|
// 特征点：山脚点
|
export function workPoint4Sjd() {
|
clearPoint()
|
clearLine()
|
// 视角定位
|
map.centerAt({ y: 36.05423, x: 113.945328, z: 1087.7, heading: 352.4, pitch: -25.4, roll: 360 })
|
|
const arrPoint = [
|
[113.944745, 36.063709, 350.32],
|
[113.950068, 36.066712, 363.01],
|
[113.936588, 36.065365, 351.94]
|
]
|
pointLayer = createArrPoint(arrPoint)
|
textLayer = createArrText(arrPoint, "山脚点") // 添加注记
|
}
|
|
// 特征点：山脚坡度变化点
|
export function workPoint5Sjpdbhd() {
|
clearPoint()
|
clearLine()
|
// 视角定位
|
map.centerAt({ y: 36.055819, x: 113.950153, z: 696.74, heading: 334.4, pitch: -13.2, roll: 359.9 })
|
|
const arrPoint = [
|
[113.948382, 36.068049, 414.36],
|
[113.938975, 36.06497, 395.87],
|
[113.941956, 36.064592, 365.89]
|
]
|
pointLayer = createArrPoint(arrPoint)
|
textLayer = createArrText(arrPoint, "山脚坡度变换点") // 添加注记
|
}
|
|
// 特征点：倾斜变换点
|
export function workPoint6Qxbhd() {
|
clearPoint()
|
clearLine()
|
// 视角定位
|
map.centerAt(
|
{ y: 36.064181, x: 113.94491, z: 1139.24, heading: 352.6, pitch: -41.2, roll: 360 },
|
{
|
complete: function () {
|
startRotatePoint()
|
}
|
}
|
)
|
|
const arrPoint = [
|
[113.941119, 36.070139, 415.86],
|
[113.945836, 36.069939, 453.99],
|
[113.942108, 36.072372, 443.98],
|
[113.945918, 36.073087, 452.72]
|
]
|
pointLayer = createArrPoint(arrPoint)
|
textLayer = createArrText(arrPoint, "倾斜变换点") // 添加注记
|
}
|
|
// 特征线：山脊线
|
export function workLine1Sjx() {
|
clearPoint()
|
map.centerAt({
|
y: 36.05982,
|
x: 113.943515,
|
z: 1534.08,
|
heading: 354.6,
|
pitch: -46.1,
|
roll: 0
|
})
|
|
// 添加线
|
const lineArr = [
|
{
|
point: [
|
[113.944168, 36.071057, 536.1],
|
[113.943975, 36.070229, 497.2],
|
[113.943899, 36.0693, 467.49],
|
[113.943496, 36.068508, 449.63]
|
]
|
},
|
{
|
point: [
|
[113.944168, 36.071057, 536.1],
|
[113.943383, 36.071112, 517.51],
|
[113.94277, 36.071261, 495.99],
|
[113.941962, 36.071444, 481.09]
|
]
|
},
|
{
|
point: [
|
[113.944168, 36.071057, 536.1],
|
[113.945999, 36.071174, 506.33],
|
[113.946798, 36.071624, 506.06],
|
[113.948012, 36.071508, 485.02],
|
[113.948862, 36.071282, 453.99]
|
]
|
},
|
{
|
point: [
|
[113.939593, 36.072087, 510.42],
|
[113.941962, 36.071444, 481.09]
|
]
|
},
|
{
|
point: [
|
[113.942957, 36.067383, 462.29],
|
[113.943496, 36.068508, 449.63]
|
]
|
},
|
{
|
point: [
|
[113.939593, 36.072087, 510.42],
|
[113.93902, 36.071731, 506.14],
|
[113.938092, 36.071371, 492.84],
|
[113.937261, 36.07093, 493.41],
|
[113.936637, 36.070518, 477.11]
|
]
|
},
|
{
|
point: [
|
[113.944168, 36.071057, 536.1],
|
[113.944119, 36.07132, 538.46],
|
[113.943971, 36.071771, 534.68],
|
[113.944034, 36.072314, 524.35],
|
[113.944123, 36.073456, 477.01],
|
[113.944412, 36.074636, 432.25]
|
]
|
},
|
{
|
point: [
|
[113.939593, 36.072087, 510.42],
|
[113.939058, 36.072637, 507.68],
|
[113.938715, 36.073519, 506.89],
|
[113.937723, 36.07391, 483.06]
|
]
|
}
|
]
|
|
polyLineLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(polyLineLayer)
|
|
for (let i = 0; i < lineArr.length; i++) {
|
const item = lineArr[i]
|
|
const line = new mars3d.graphic.PolylineEntity({
|
positions: item.point,
|
style: {
|
width: 5,
|
clampToGround: true,
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
|
color: Cesium.Color.YELLOW,
|
speed: 3, // 控制速度
|
url: "img/textures/line-color-yellow.png"
|
})
|
},
|
tooltip: "山脊线"
|
})
|
polyLineLayer.addGraphic(line)
|
}
|
setTimeout(() => {
|
if (polyLineLayer) {
|
polyLineLayer.eachGraphic((graphic) => {
|
delete graphic.style.material
|
graphic.setStyle({
|
material: Cesium.Color.YELLOW
|
})
|
})
|
}
|
}, 4000)
|
}
|
|
// 特征线：山谷线
|
export function workLine2Sgx() {
|
clearPoint()
|
map.centerAt({ y: 36.05648, x: 113.944653, z: 2092, heading: 354.4, pitch: -44.6 })
|
|
// 添加线
|
const lineArr = [
|
{
|
point: [
|
[113.941971, 36.073964, 403.46],
|
[113.941941, 36.073397, 414.46],
|
[113.942012, 36.072802, 427.98],
|
[113.94214, 36.072218, 445.57],
|
[113.941901, 36.071582, 482.41],
|
[113.941634, 36.071088, 468.32],
|
[113.941371, 36.070708, 446.86],
|
[113.941284, 36.070435, 431.69],
|
[113.94103, 36.069954, 408.35],
|
[113.941016, 36.06991, 406.56],
|
[113.940603, 36.069227, 385.57],
|
[113.939335, 36.067923, 367.22]
|
]
|
},
|
{
|
point: [
|
[113.946025, 36.074151, 403.28],
|
[113.945954, 36.073467, 433.98],
|
[113.945871, 36.072436, 484.02],
|
[113.94603, 36.07161, 507.66],
|
[113.946168, 36.071048, 501.99],
|
[113.945904, 36.070101, 468.17],
|
[113.945797, 36.069853, 447.03],
|
[113.946002, 36.069094, 406.59],
|
[113.946279, 36.067475, 378.83]
|
]
|
}
|
]
|
|
polyLineLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(polyLineLayer)
|
|
for (let i = 0; i < lineArr.length; i++) {
|
const item = lineArr[i]
|
|
const line = new mars3d.graphic.PolylineEntity({
|
positions: item.point,
|
style: {
|
width: 5,
|
clampToGround: true,
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
|
color: Cesium.Color.AQUA,
|
speed: 3, // 控制速度
|
url: "img/textures/line-color-yellow.png"
|
})
|
},
|
tooltip: "山谷线"
|
})
|
polyLineLayer.addGraphic(line)
|
}
|
|
setTimeout(() => {
|
if (polyLineLayer) {
|
polyLineLayer.eachGraphic((graphic) => {
|
delete graphic.style.material
|
graphic.setStyle({
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: Cesium.Color.AQUA,
|
dashLength: 10.0
|
})
|
})
|
})
|
}
|
}, 4000)
|
}
|
|
// 特征线：俯瞰
|
export function workLine3Fk() {
|
clearPoint()
|
map.centerAt({ y: 36.070613, x: 113.943032, z: 3059, heading: 0.6, pitch: -88.9 })
|
}
|
|
// 绘制过程：计算通过点
|
export function workDgx1Point() {
|
clearPoint()
|
map.centerAt({ y: 36.06874, x: 113.948078, z: 811.62, heading: 292.6, pitch: -39.6 })
|
|
const arrPoint = [
|
[113.944168, 36.071057, 536.1],
|
[113.94405, 36.070572, 519.49],
|
[113.943981, 36.070254, 498.84],
|
[113.943944, 36.069863, 480.01]
|
]
|
pointLayer = createArrPoint(arrPoint)
|
|
const labelText = ["b", "m", "g", "f", "h"]
|
pointLayer.eachGraphic((graphic, index) => {
|
graphic.setStyle({
|
label: {
|
text: labelText[index] || "",
|
color: "yellow",
|
font_size: 30
|
}
|
})
|
})
|
|
lineGraphic = new mars3d.graphic.PolylineEntity({
|
positions: [
|
[113.944168, 36.071057, 536.1],
|
[113.94405, 36.070572, 519.49],
|
[113.943981, 36.070254, 498.84],
|
[113.943944, 36.069863, 480.01]
|
],
|
style: {
|
width: 5,
|
clampToGround: true,
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
|
color: Cesium.Color.MAGENTA,
|
speed: 3, // 控制速度
|
url: "img/textures/line-color-yellow.png"
|
})
|
}
|
})
|
map.graphicLayer.addGraphic(lineGraphic)
|
}
|
|
// 绘制过程：等高线绘制
|
export function workDgx2Line() {
|
clearPoint()
|
map.centerAt({ lat: 36.069792, lng: 113.944474, alt: 1708, heading: 357, pitch: -82 })
|
|
const arrPoint = [
|
[113.946061, 36.070867, 500.37],
|
[113.943193, 36.070854, 499.86],
|
[113.943335, 36.072232, 500.31],
|
[113.94469, 36.072746, 499.44],
|
[113.946753, 36.072311, 499.98],
|
[113.945146, 36.071556, 519.6],
|
[113.944671, 36.072169, 519.95],
|
[113.943607, 36.071978, 519.48],
|
[113.94405, 36.070572, 519.49],
|
[113.944739, 36.070756, 520.55]
|
]
|
pointLayer = createArrPoint(arrPoint)
|
|
polyline1 = new mars3d.graphic.PolylineEntity({
|
positions: [
|
[113.945146, 36.071556, 519.6],
|
[113.945021, 36.071174, 520.26],
|
[113.945016, 36.070846, 519.28],
|
[113.944739, 36.070756, 520.55],
|
[113.944624, 36.070604, 520.01],
|
[113.944312, 36.070527, 519.49],
|
[113.94405, 36.070572, 519.49],
|
[113.943976, 36.070636, 520.27],
|
[113.943861, 36.070697, 520.12],
|
[113.943354, 36.071204, 520],
|
[113.943607, 36.071978, 519.48],
|
[113.943847, 36.072224, 520.7],
|
[113.943889, 36.072331, 520.5],
|
[113.944011, 36.072474, 520.19],
|
[113.944671, 36.072169, 519.95],
|
[113.94511, 36.071581, 520.05],
|
[113.945146, 36.071556, 519.6]
|
],
|
style: {
|
width: 3,
|
color: "#ff0000",
|
clampToGround: true,
|
closure: true
|
}
|
})
|
map.graphicLayer.addGraphic(polyline1)
|
|
polyline2 = new mars3d.graphic.PolylineEntity({
|
positions: [
|
[113.946061, 36.070867, 500.37],
|
[113.945214, 36.070585, 500.84],
|
[113.944658, 36.070309, 500.26],
|
[113.943981, 36.070254, 498.84],
|
[113.943577, 36.070474, 499.95],
|
[113.943193, 36.070854, 499.86],
|
[113.942839, 36.071247, 498.53],
|
[113.942921, 36.071562, 499.55],
|
[113.943109, 36.071823, 500],
|
[113.943335, 36.072232, 500.31],
|
[113.94356, 36.072587, 501.02],
|
[113.943696, 36.072889, 499.57],
|
[113.944123, 36.073112, 496.9],
|
[113.94469, 36.072746, 499.44],
|
[113.944974, 36.072371, 501.42],
|
[113.945401, 36.071963, 500.52],
|
[113.945867, 36.071986, 500.11],
|
[113.946358, 36.071794, 500.05],
|
[113.946546, 36.071771, 500.47],
|
[113.946515, 36.071902, 500.13],
|
[113.94662, 36.072107, 499.93],
|
[113.946618, 36.072232, 500.05],
|
[113.946753, 36.072311, 499.98],
|
[113.947247, 36.072043, 499.98],
|
[113.947433, 36.071534, 499.67],
|
[113.946848, 36.071405, 500.22],
|
[113.946155, 36.070912, 499.86],
|
[113.946061, 36.070867, 500.37]
|
],
|
style: {
|
width: 3,
|
color: "#ff0000",
|
clampToGround: true,
|
closure: true
|
}
|
})
|
map.graphicLayer.addGraphic(polyline2)
|
}
|
|
// 绘制过程：等高线结果
|
export function workDgx3End() {
|
clearPoint()
|
map.setCameraView(
|
{ y: 36.064736, x: 113.935567, z: 1276.68, heading: 52.4, pitch: -44.5, roll: 0, duration: 3 },
|
{
|
complete() {
|
startRotatePoint(new Cesium.Cartesian3.fromDegrees(113.942685, 36.07012, 461.53))
|
}
|
}
|
)
|
|
contourLine = new mars3d.thing.ContourLine({
|
positions: [
|
[113.941558, 36.078396, 370.6],
|
[113.932244, 36.069158, 376.55],
|
[113.942587, 36.061319, 320],
|
[113.952388, 36.071267, 379.63],
|
[113.941558, 36.078396, 370.6]
|
],
|
spacing: 20,
|
width: 1.5,
|
color: Cesium.Color.RED
|
})
|
map.addThing(contourLine)
|
}
|
|
// 创建点 公共方法
|
export function createArrPoint(arrPoint) {
|
const graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
for (let i = 0; i < arrPoint.length; i++) {
|
const item = arrPoint[i]
|
|
const graphic = new mars3d.graphic.PointEntity({
|
position: item,
|
style: {
|
color: "#ffffff",
|
opacity: 0.9,
|
outline: true,
|
outlineColor: "#ff0000",
|
outlineWidth: 2,
|
visibleDepth: true,
|
clampToGround: true,
|
pixelSize: 10,
|
label: {
|
text: item[2] + "",
|
font_size: 18,
|
font_family: "楷体",
|
color: Cesium.Color.AZURE,
|
outline: true,
|
outlineColor: Cesium.Color.BLACK,
|
outlineWidth: 2,
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
pixelOffset: new Cesium.Cartesian2(-10, -10) // 偏移量
|
}
|
}
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
return graphicLayer
|
}
|
|
// 创建文本指示 公共方法
|
export function createArrText(arrPoint, name) {
|
const graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
for (let i = 0; i < arrPoint.length; i++) {
|
const item = arrPoint[i]
|
|
// 文字注记
|
const graphic = new mars3d.graphic.DivGraphic({
|
position: item,
|
style: {
|
html: `<div class="marsImgPanel1">
|
<div class="title">${name}</div>
|
</div >`,
|
clampToGround: true,
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
}
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
return graphicLayer
|
}
|
|
// 绕点飞行
|
let rotatePoint
|
export function startRotatePoint(center) {
|
if (!rotatePoint) {
|
rotatePoint = new mars3d.thing.RotatePoint({
|
direction: false, // 方向 true逆时针，false顺时针
|
time: 50 // 给定飞行一周所需时间(单位 秒)，控制速度
|
})
|
map.addThing(rotatePoint)
|
}
|
// 开启旋转
|
rotatePoint.start(center)
|
}
|
|
export function stopRotatePoint() {
|
if (rotatePoint) {
|
rotatePoint.stop()
|
}
|
}
|
|
// 清除页面
|
export function clear() {
|
clearPoint()
|
clearLine()
|
}
|
|
export function clearPoint() {
|
pointLayer && pointLayer.destroy()
|
textLayer && textLayer.destroy()
|
pointLayer = null
|
textLayer = null
|
stopRotatePoint()
|
}
|
|
export function clearLine() {
|
polyLineLayer && polyLineLayer.destroy()
|
lineGraphic && lineGraphic.remove()
|
polyline1 && polyline1.remove()
|
polyline2 && polyline2.remove()
|
contourLine && map.removeThing(contourLine, true)
|
lineGraphic = null
|
polyline1 = null
|
polyline2 = null
|
contourLine = null
|
polyLineLayer = null
|
stopRotatePoint()
|
}
|
|
// 停止视角定位操作
|
export function cancelFlight() {
|
map.cancelFlight()
|
}
|
