import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
export let graphicLayer // 矢量图层对象
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 30.286465, lng: 117.620524, alt: 510892, heading: 358, pitch: -50 }
|
},
|
layers: [
|
{
|
id: 1987,
|
type: "geojson",
|
name: "淮海经济区11市",
|
url: "//data.mars3d.cn/file/geojson/huaihai.json",
|
symbol: {
|
styleOptions: {
|
materialType: mars3d.MaterialType.PolyGradient,
|
color: "#3388cc",
|
opacity: 0.7,
|
alphaPower: 1.3,
|
length: "{gdp}"
|
},
|
styleField: "Name",
|
styleFieldOptions: {
|
济宁市: { color: "#D4AACE" },
|
临沂市: { color: "#8DC763" },
|
菏泽市: { color: "#F7F39A" },
|
枣庄市: { color: "#F7F39A" },
|
徐州市: { color: "#96F0F1" },
|
宿迁市: { color: "#EAC9A8" },
|
连云港市: { color: "#F7F39A" },
|
商丘市: { color: "#D4AACE" },
|
宿州市: { color: "#8DC763" },
|
亳州市: { color: "#96F0F1" },
|
淮北市: { color: "#EAC9A8" }
|
}
|
},
|
show: true
|
}
|
]
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
map.basemap = 2017 // 蓝色底图
|
|
// 创建Graphic图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/apidemo/huaihai-jj.json" })
|
.then(function (res) {
|
conventChartsData(res.data) // 单击显示的popup
|
showYearZT(res.data) // 柱状图
|
bindHaihuaiPopup()
|
})
|
.catch(function () {
|
globalMsg("获取信息失败，请稍候再试")
|
})
|
|
map.on(mars3d.EventType.load, function (event) {
|
console.log("矢量数据对象加载完成", event)
|
})
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
/**
|
* 展示某年的椎体
|
*
|
* @param {object} data 通过JSON获取的数据
|
* @returns {void} 无
|
*/
|
function showYearZT(data) {
|
const yearArr = Object.keys(data)
|
const arr = data[yearArr[0]]
|
|
for (let i = 0; i < arr.length; i += 1) {
|
const attr = arr[i]
|
const jwd = getJWDByName(attr.name)
|
|
const num1 = attr["第一产业"]
|
const num2 = attr["第二产业"]
|
const num3 = attr["第三产业"]
|
const numall = Number(num1 + num2 + num3).toFixed(2)
|
const html = `${attr.name}<br/>
|
<span style="color:#63AEFF">第一产业：${num1}</span><br/>
|
<span style="color:#FFB861">第二产业：${num2}</span><br/>
|
<span style="color:#FF6D5D">第三产业：${num3}</span>`
|
|
const height1 = Math.floor(num1 * 10)
|
const height2 = Math.floor(num2 * 10)
|
const height3 = Math.floor(num3 * 10)
|
|
const p1 = Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height3 / 2)
|
const p2 = Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height3 + height2 / 2)
|
const p3 = Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height3 + height2 + height1 / 2)
|
|
// 添加柱体
|
createZT(p1, height3, "#63AEFF", html)
|
createZT(p2, height2, "#FFB861", html)
|
createZT(p3, height1, "#FF6D5D", html)
|
|
// 添加文字
|
const primitive = new mars3d.graphic.LabelPrimitive({
|
position: Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height1 + height2 + height3),
|
style: {
|
text: numall,
|
font_size: 18,
|
font_family: "楷体",
|
color: "#00ff00",
|
outline: true,
|
outlineColor: "#000000",
|
outlineWidth: 1,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
pixelOffset: new Cesium.Cartesian2(0, -20)
|
}
|
})
|
graphicLayer.addGraphic(primitive)
|
primitive.bindTooltip(html)
|
}
|
}
|
|
// 创建柱体
|
function createZT(position, len, color, html) {
|
const graphic = new mars3d.graphic.CylinderEntity({
|
position: position,
|
style: {
|
length: len,
|
topRadius: 6000.0,
|
bottomRadius: 6000.0,
|
color: color
|
}
|
})
|
graphicLayer.addGraphic(graphic)
|
|
graphic.bindTooltip(html)
|
|
// graphic._position_show = position
|
// graphic._length_show = len
|
return graphic
|
}
|
|
const cityPosition = [
|
{ name: "亳州", jwd: [116.203602, 33.496075] },
|
{ name: "商丘", jwd: [115.871509, 34.297084] },
|
{ name: "淮北", jwd: [116.688413, 33.689214] },
|
{ name: "宿州", jwd: [117.234682, 33.740035] },
|
{ name: "徐州", jwd: [117.70509, 34.350708] },
|
{ name: "宿迁", jwd: [118.559349, 33.807355] },
|
{ name: "连云港", jwd: [118.875445, 34.619808] },
|
{ name: "临沂", jwd: [118.026908, 35.262767] },
|
{ name: "枣庄", jwd: [117.320268, 35.072555] },
|
{ name: "济宁", jwd: [116.856599, 35.500232] },
|
{ name: "菏泽", jwd: [115.716086, 35.05629] }
|
]
|
|
// 根据名称获取坐标
|
function getJWDByName(name) {
|
for (let i = 0; i < cityPosition.length; i += 1) {
|
const item = cityPosition[i]
|
if (item.name === name) {
|
return item.jwd
|
}
|
}
|
return []
|
}
|
|
//= ===============以下是单击显示的echarst图表的相关代码===============
|
let arrYear
|
let objCity = {}
|
|
// 转换值
|
function conventChartsData(arrOld) {
|
console.log("转换前数据=>", arrOld)
|
|
arrYear = Object.keys(arrOld) // [年份]
|
|
objCity = {} // 十一个城市对应的各年度数据
|
|
for (let a = 0; a < arrYear.length; a++) {
|
const arrCity = arrOld[arrYear[a]] // 指定某年的11个城市对应数据
|
|
// 循环十次
|
for (let b = 0; b < arrCity.length; b++) {
|
const item = arrCity[b]
|
|
if (!objCity[item.code]) {
|
objCity[item.code] = []
|
}
|
objCity[item.code].push(item.GDP)
|
}
|
}
|
|
console.log("转换完成的数据=>", objCity)
|
}
|
|
function bindHaihuaiPopup() {
|
const layerHuaihai = map.getLayer(1987, "id") // 获取config.json中对应图层
|
|
// 在layer上绑定Popup单击弹窗
|
layerHuaihai.bindPopup(
|
`<div class="gdpView">
|
<div class="gdpCharts" id="gdpCharts"></div>
|
<input type="button" class="btnClosePopup closeButton" value="×" />
|
</div>`,
|
{
|
template: false,
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
verticalOrigin: Cesium.VerticalOrigin.CENTER
|
}
|
)
|
|
let gdpCharts
|
layerHuaihai.on(mars3d.EventType.popupOpen, function (event) {
|
const container = event.container // popup对应的DOM
|
console.log("图层上打开了popup", container)
|
|
const option = getCityChartsOptions(event.graphic.attr)
|
if (!option) {
|
return
|
}
|
|
gdpCharts = echarts.init(container.querySelector("#gdpCharts"))
|
gdpCharts.setOption(option)
|
})
|
layerHuaihai.on(mars3d.EventType.popupClose, function (event) {
|
const container = event.container // popup对应的DOM
|
console.log("图层上移除了popup", container)
|
|
gdpCharts.dispose()
|
gdpCharts = null
|
})
|
}
|
|
function getCityChartsOptions(attr) {
|
const code = attr.code.slice(0, 4)
|
const arrGDPvalues = objCity[code]
|
if (!arrGDPvalues) {
|
globalMsg(attr.Name + " 无经济数据")
|
return
|
}
|
|
// arrGDPvalues 是点击的城市的数值,需要以[b,0,value]的方式重新排列
|
const arrData = []
|
for (let b = 0; b < arrGDPvalues.length; b++) {
|
arrData[b] = [b, 0, arrGDPvalues[b]]
|
}
|
|
const option = {
|
visualMap: {
|
max: 4500,
|
show: false,
|
inRange: {
|
color: ["#32C5E9", "#67E0E3", "#FFDB5C", "#37A2DA", "#9FE6B8"]
|
}
|
},
|
title: {
|
text: attr.Name + " 近五年GDP（亿元）",
|
textStyle: { color: "white", fontSize: "17", fontWidth: "normal" },
|
top: "10",
|
left: "5"
|
},
|
tooltip: {
|
show: "true",
|
trigger: "item",
|
showContent: "true",
|
position: "top",
|
fontSize: "12",
|
color: "black",
|
formatter: function formatter(params) {
|
return "GDP:" + params.data[2]
|
}
|
},
|
// x轴是横向，是时间
|
xAxis3D: {
|
type: "category",
|
data: arrYear,
|
nameTextStyle: {
|
color: "rgb(0, 0, 0, 0.1)"
|
},
|
// splitLine不可见时仅仅线不可见
|
splitLine: {
|
show: false
|
}
|
},
|
// y轴被缩小
|
yAxis3D: {
|
type: "category",
|
data: [" "],
|
nameTextStyle: {
|
color: "rgb(0, 0, 0, 0.1)"
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
// z轴是gdp的值
|
zAxis3D: {
|
type: "value",
|
name: "GDP",
|
axisLine: {
|
lineStyle: {
|
color: "rgb(0, 0, 0, 0.1)"
|
}
|
},
|
nameTextStyle: {
|
color: "white",
|
fontSize: "18"
|
},
|
nameGap: "50"
|
},
|
grid3D: {
|
boxWidth: 180, // 缩大放小x轴
|
boxDepth: 10, // 缩大放小y轴
|
top: "20",
|
// left: '50',
|
// 視角的設置
|
viewControl: {
|
alpha: 8,
|
beta: 0,
|
distance: 162,
|
center: [-20, 0, 0]
|
},
|
axisLabel: {
|
color: "white",
|
fontSize: 15
|
},
|
axisPointer: {
|
// 坐标轴指示线，就是鼠标移入时，指向x轴，y轴的线
|
show: false
|
}
|
},
|
series: [
|
{
|
type: "bar3D",
|
data: arrData,
|
shading: "lambert",
|
label: {
|
position: "top",
|
show: true,
|
color: "white"
|
},
|
emphasis: {
|
label: {
|
color: "white",
|
fontSize: "18"
|
}
|
}
|
}
|
]
|
}
|
return option
|
}
|
