import * as mars3d from "mars3d" export let map // mars3d.Map三维地图对象 // 需要覆盖config.json中地图属性参数(当前示例框架中自动处理合并) export const mapOptions = { scene: { center: { lat: 26.63086, lng: 113.052819, alt: 5934039, heading: 0, pitch: -80 } } } /** * 初始化地图业务,生命周期钩子函数(必须) * 框架在地图初始化完成后自动调用该函数 * @param {mars3d.Map} mapInstance 地图对象 * @returns {void} 无 */ export function onMounted(mapInstance) { map = mapInstance // 记录首次创建的map // 创建Echarts图层 createEchartsLayer() } /** * 释放当前地图业务的生命周期函数 * @returns {void} 无 */ export function onUnmounted() { map = null } function createEchartsLayer() { const options = getEchartsOption() const echartsLayer = new mars3d.layer.EchartsLayer(options) map.addLayer(echartsLayer) // 图表自适应 window.addEventListener("resize", function () { echartsLayer.resize() }) } /** *echart图层 * * @return {option} echart图表的数据 */ function getEchartsOption() { const geoCoordMap = { 安徽省: [117.17, 31.52], 北京市: [116.24, 39.55], 重庆市: [106.54, 29.59], 福建省: [119.18, 26.05], 甘肃省: [103.51, 36.04], 广东省: [113.14, 23.08], 广西壮族自治区: [108.19, 22.48], 贵州省: [106.42, 26.35], 海南省: [110.2, 20.02], 河北省: [114.3, 38.02], 河南省: [113.4, 34.46], 黑龙江省: [128.36, 45.44], 湖北省: [112.27, 30.15], 湖南省: [112.59, 28.12], 吉林省: [125.19, 43.54], 江苏省: [118.46, 32.03], 江西省: [115.55, 28.4], 辽宁省: [123.25, 41.48], 内蒙古: [108.41, 40.48], 宁夏回族自治区: [106.16, 38.27], 青海省: [101.48, 36.38], 山东省: [118.0, 36.4], 山西省: [112.33, 37.54], 陕西省: [108.57, 34.17], 上海市: [121.29, 31.14], 海南: [108.77, 19.1], 四川省: [104.04, 30.4], 天津市: [117.12, 39.02], 西藏自治区: [91.08, 29.39], 新疆维吾尔自治区: [87.36, 43.45], 云南省: [102.42, 25.04], 浙江省: [120.1, 30.16], 澳门: [115.07, 21.33], 台湾省: [121.21, 23.53] } const BJData = [ [ { name: "北京市" }, { name: "上海市", value: 195 } ], [ { name: "北京市" }, { name: "广东省", value: 90 } ], [ { name: "北京市" }, { name: "辽宁省", value: 80 } ], [ { name: "北京市" }, { name: "湖北省", value: 70 } ], [ { name: "北京市" }, { name: "内蒙古", value: 70 } ], [ { name: "北京市" }, { name: "江苏省", value: 60 } ], [ { name: "北京市" }, { name: "新疆维吾尔自治区", value: 70 } ], [ { name: "北京市" }, { name: "四川省", value: 40 } ], [ { name: "北京市" }, { name: "云南省", value: 130 } ], [ { name: "北京市" }, { name: "黑龙江省", value: 130 } ], [ { name: "北京市" }, { name: "甘肃省", value: 200 } ], [ { name: "北京市" }, { name: "西藏自治区", value: 60 } ] ] // let planePath = "path://M917.965523 917.331585c0 22.469758-17.891486 40.699957-39.913035 40.699957-22.058388 0-39.913035-18.2302-39.913035-40.699957l-0.075725-0.490164-1.087774 0c-18.945491-157.665903-148.177807-280.296871-306.821991-285.4748-3.412726 0.151449-6.751774 0.562818-10.240225 0.562818-3.450589 0-6.789637-0.410346-10.202363-0.524956-158.606321 5.139044-287.839661 127.806851-306.784128 285.436938l-1.014096 0 0.075725 0.490164c0 22.469758-17.854647 40.699957-39.913035 40.699957s-39.915082-18.2302-39.915082-40.699957l-0.373507-3.789303c0-6.751774 2.026146-12.903891 4.91494-18.531052 21.082154-140.712789 111.075795-258.241552 235.432057-312.784796C288.420387 530.831904 239.989351 444.515003 239.989351 346.604042c0-157.591201 125.33352-285.361213 279.924387-285.361213 154.62873 0 279.960203 127.770012 279.960203 285.361213 0 97.873098-48.391127 184.15316-122.103966 235.545644 124.843356 54.732555 215.099986 172.863023 235.808634 314.211285 2.437515 5.290493 4.01443 10.992355 4.01443 17.181311L917.965523 917.331585zM719.822744 346.679767c0-112.576985-89.544409-203.808826-199.983707-203.808826-110.402459 0-199.944821 91.232864-199.944821 203.808826s89.542362 203.808826 199.944821 203.808826C630.278335 550.488593 719.822744 459.256752 719.822744 346.679767z"; const convertData = function (data) { const res = [] for (let i = 0; i < data.length; i++) { const dataItem = data[i] const fromCoord = geoCoordMap[dataItem[0].name] const toCoord = geoCoordMap[dataItem[1].name] if (fromCoord && toCoord) { res.push({ fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord] }) } } return res } const color = ["#a6c84c", "#ffa022", "#46bee9"] const mySeries = [] ;[["", BJData]].forEach(function (item, i) { mySeries.push( { // 线 name: item[0], type: "lines", coordinateSystem: "mars3dMap", zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: "#fff", symbolSize: 3 }, lineStyle: { color: color[0], width: 0, curveness: 0.2 }, data: convertData(item[1]) }, { // 移动 点 name: item[0], type: "lines", coordinateSystem: "mars3dMap", zlevel: 2, effect: { show: true, period: 6, trailLength: 0.1, // symbol: planePath, symbol: "arrow", symbolSize: 5 }, lineStyle: { color: color[1], width: 1, opacity: 0.4, curveness: 0.2 }, data: convertData(item[1]) }, { // 省份圆点 name: item[0], // name: item[0] + ' Top10', type: "effectScatter", coordinateSystem: "mars3dMap", zlevel: 3, rippleEffect: { brushType: "stroke" }, label: { show: true, position: "right", formatter: "{b}", color: "inherit" }, symbolSize: function (val) { return val[2] / 6 }, itemStyle: { color: function (params) { const tmp = params.data.value[2] if (tmp < 100) { return "green" } else if (tmp > 150) { return "red" } else { return "yellow" } } }, data: item[1].map(function (dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) } }) } ) }) const option = { animation: false, // backgroundColor: '#404a59', backgroundColor: "rgba(116, 112, 124, 0.2)", title: { text: "北京病人就诊流向图", subtext: "(1月份统计结果)", left: "center", textStyle: { color: "#fff" }, subtextStyle: { color: "yellow", fontWeight: "bold" } }, tooltip: { trigger: "item", formatter: function (params) { if (params.seriesIndex === 2 || params.seriesIndex === 5 || params.seriesIndex === 8) { return params.name + " " + params.seriesName + " " + params.data.value[2] + " 人次" } else if (params.seriesIndex === 1 || params.seriesIndex === 4 || params.seriesIndex === 7) { return params.data.fromName + "→" + params.data.toName } } }, series: mySeries } return option }