3D地图+vue3

没错就是我哎呀

已于 2023-02-24 13:55:22 修改

阅读量194

点赞数

分类专栏： vue 地图前端文章标签： echarts vue.js 前端

于 2023-02-24 13:51:52 首次发布

本文链接：https://blog.csdn.net/he3236220/article/details/129198877

版权

前端同时被 3 个专栏收录

41 篇文章 0 订阅

订阅专栏

vue

34 篇文章 1 订阅

订阅专栏

地图

2 篇文章 0 订阅

订阅专栏

echarts,3d地图的地址 echarts-gl文档地址

借鉴地址：https://www.jianshu.com/p/f3c339631275

index.html引用

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=key&s=1"></script>

html

<div id="3DEarth"></div>

js

<script setup lang="ts" name="visualizingLinkDemo2">
import { reactive, onMounted, onUnmounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
// echarts3D地址 https://echarts.apache.org/zh/option-gl.html#globe
import { formatDate } from "/@/utils/formatTime";
import { NextLoading } from "/@/utils/loading";
import {
  dropdownList,
  skyList,
  dBtnList,
  earth3DBtnList,
  chartData4List,
} from "./mock/demo2";
import worldImg from "./images/world.jpg";
import bathymetryImg from "./images/bathymetry.jpg";
import { china } from "./lib/china";
// 定义变量内容
const geoCoordMap = {
  //市区坐标
  黑龙江: [127.9688, 45.368],
  内蒙古: [110.3467, 41.4899],
  吉林: [125.8154, 44.2584],
  北京市: [116.4551, 40.2539],
  辽宁: [123.1238, 42.1216],
  河北: [114.4995, 38.1006],
  天津: [117.4219, 39.4189],
  山西: [112.3352, 37.9413],
  陕西: [109.1162, 34.2004],
  甘肃: [103.5901, 36.3043],
  宁夏: [106.3586, 38.1775],
  青海: [101.4038, 36.8207],
  新疆: [87.9236, 43.5883],
  西藏: [91.11, 29.97],
  四川: [103.9526, 30.7617],
  重庆: [108.384366, 30.439702],
  山东: [117.1582, 36.8701],
  河南: [113.4668, 34.6234],
  江苏: [118.8062, 31.9208],
  安徽: [117.29, 32.0581],
  湖北: [114.3896, 30.6628],
  浙江: [119.5313, 29.8773],
  福建: [119.4543, 25.9222],
  江西: [116.0046, 28.6633],
  湖南: [113.0823, 28.2568],
  贵州: [106.6992, 26.7682],
  云南: [102.9199, 25.4663],
  广东: [113.12244, 23.009505],
  广西: [108.479, 23.1152],
  海南: [110.3893, 19.8516],
  上海: [121.4648, 31.2891],
};
const chinaDatas = [
  //柱子数据
  [
    {
      name: "黑龙江",
      value: 100,
    },
  ],
  [
    {
      name: "内蒙古",
      value: 300,
    },
  ],
  [
    {
      name: "吉林",
      value: 300,
    },
  ],
  [
    {
      name: "辽宁",
      value: 300,
    },
  ],
  [
    {
      name: "河北",
      value: 300,
    },
  ],
  [
    {
      name: "天津",
      value: 300,
    },
  ],
  [
    {
      name: "山西",
      value: 300,
    },
  ],
  [
    {
      name: "陕西",
      value: 300,
    },
  ],
  [
    {
      name: "甘肃",
      value: 300,
    },
  ],
  [
    {
      name: "宁夏",
      value: 300,
    },
  ],
  [
    {
      name: "青海",
      value: 300,
    },
  ],
  [
    {
      name: "新疆",
      value: 300,
    },
  ],
  [
    {
      name: "西藏",
      value: 300,
    },
  ],
  [
    {
      name: "四川",
      value: 300,
    },
  ],
  [
    {
      name: "重庆",
      value: 300,
    },
  ],
  [
    {
      name: "山东",
      value: 300,
    },
  ],
  [
    {
      name: "河南",
      value: 300,
    },
  ],
  [
    {
      name: "江苏",
      value: 300,
    },
  ],
  [
    {
      name: "安徽",
      value: 300,
    },
  ],
  [
    {
      name: "湖北",
      value: 300,
    },
  ],
  [
    {
      name: "浙江",
      value: 300,
    },
  ],
  [
    {
      name: "福建",
      value: 300,
    },
  ],
  [
    {
      name: "江西",
      value: 300,
    },
  ],
  [
    {
      name: "湖南",
      value: 300,
    },
  ],
  [
    {
      name: "贵州",
      value: 300,
    },
  ],
  [
    {
      name: "广西",
      value: 300,
    },
  ],
  [
    {
      name: "海南",
      value: 300,
    },
  ],
  [
    {
      name: "上海",
      value: 1300,
    },
  ],
];

const state = reactive<Demo2State>({
  time: {
    txt: "",
    fun: 0,
  },
  dropdownList,
  dropdownActive: "请选择",
  skyList,
  dBtnList,
  chartData4Index: 0,
  dBtnActive: 0,
  earth3DBtnList,
  chartData4List,
  myCharts: [],
});

// 初始化时间
const initTime = () => {
  state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ");
  state.time.fun = window.setInterval(() => {
    state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ");
  }, 1000);
};
       
// 3DEarth 地图
const init3DEarth = (globeRadius: any) => {
  let el = <HTMLElement>document.getElementById("3DEarth");
  el.style.height = `${rightChartData5.value.offsetHeight}px`;
  const myChart = echarts.init(el);
  echarts.registerMap("china", china);
  /*
  //第一种，地球模式 
  const option = {
		globe: {
			baseTexture: worldImg,
			heightTexture: bathymetryImg,
			shading: 'realistic',
			light: {
				ambient: {
					intensity: 0.4,
				},
				main: {
					intensity: 0.4,
				},
			},
			viewControl: {
				autoRotate: true,
			},
			postEffect: {
				enable: true,
				bloom: {
					enable: true,
				},
			},
			globeRadius,
		},
		series: {
			type: 'lines3D',
			coordinateSystem: 'globe',
			blendMode: 'lighter',
			lineStyle: {
				width: 1,
				color: 'rgb(50, 50, 150)',
				opacity: 0.1,
			},
			data: [],
		},
	};
	// 随机模拟攻击线
	let rodamData: any = function () {
		let longitude = 105.18;
		let longitude2 = Math.random() * 360 - 180;
		let latitude = 37.51;
		let latitude2 = Math.random() * 180 - 90;
		return {
			coords: [
				[longitude2, latitude2],
				[longitude, latitude],
			],
			value: (Math.random() * 3000).toFixed(2),
		};
	};
	for (let i = 0; i < 150; i++) {
		option.series.data = option.series.data.concat(rodamData());
	} */
//中国地图
  const option = {
    // backgroundColor: "#ddd",
    /* visualMap: [
      {
        type: "continuous",
        show: false,
        seriesIndex: 0,
        text: ["bar3D"],
        calculable: true,
        max: 350,
        inRange: {
          color: ["#87aa66", "#eba438", "#d94d4c"],
        },
      },
    ], */
    geo3D: {
      map: "china",
      roam: true,
      itemStyle: {
        areaColor: "#ccc",
        opacity: 1,
        borderWidth: 0.8,
        borderColor: "rgb(62,215,213)",
      },
      label: {
        show: false,
      },
      emphasis: {
        //当鼠标放上去  地区区域是否显示名称
        label: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 3,
            backgroundColor: "rgba(0,23,11,0)",
          },
        },
      },
      light: {
        main: {
          color: "#fff", //光照颜色
          intensity: 2, //光照强度
          shadowQuality: "high", //阴影亮度
          shadow: false, //是否显示阴影
          //                        alpha: 55,
          beta: 10,
        },
        ambient: {
          intensity: 0.3,
        },
      },
    },
    series: [
      {
        name: "bar3D",
        type: "bar3D",
        coordinateSystem: "geo3D",
        barSize: 1, //柱子粗细
        shading: "lambert",
        opacity: 0.1,
        itemStyle: {
          color: "#0588F1",
          opacity: 0.6,
        },
        //                bevelSize: 0.3,
        label: {
          show: false,
          formatter: function (data: any) {
            //                        console.log(data)
            var res = data.name + " " + data.value[2];
            return res;
          },
        },
        data: convertData(chinaDatas),
      },
      /* {
        name: "line3D",
        type: "line3D",
        coordinateSystem: "geo3D",
        lineStyle: {
          color: "red",
          opacity: 0.1,
          width: 2,
        },
        data: convertData(chinaDatas),
      }, */
    ],
  };

  myChart.setOption(option);
  myChart.on("click",function(e){
    console.log(e);
    
  })
};
const convertData = function (data: any) {
  let res = [];
  for (let i = 0; i < data.length; i++) {
    let geoCoord = geoCoordMap[data[i][0].name];
    if (geoCoord) {
      res.push({
        name: data[i][0].name,
        value: geoCoord.concat(data[i][0].value),
      });
    }
  }
  return res;
};

// 监听地球大小变化
const initAddEventListener3DEarth = () => {
  let w = document.body.clientWidth;
  let globeRadius = 0;
  if (w >= 1920) globeRadius = 100;
  else if (w > 1200 && w < 1920) globeRadius = 70;
  else if (w > 992 && w < 1200) globeRadius = 60;
  else if (w > 768 && w < 992) globeRadius = 40;
  else if (w < 768) globeRadius = 20;
  init3DEarth(globeRadius);
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  initAddEventListener3DEarth();
  window.addEventListener("resize", () => {
    for (let i = 0; i < state.myCharts.length; i++) {
      state.myCharts[i].resize();
    }
    initAddEventListener3DEarth();
  });
};

// 页面加载时
onMounted(async () => {
  NextLoading.done();
  initTime();
  await initRightChartData1();
  await initRightChartData4();
  await initRightChartData3();
  await initRightChartData2();
  await initRightChartData6();
  await initEchartsResize();
  chart.on("click", this.echartsMapClick);
});
// 页面卸载时
onUnmounted(() => {
  window.clearInterval(state.time.fun);
});
</script>

china.ts

点击获取经纬度网站高德获取经纬度
获取地图jsonjson获取链接

export const china = {"type":"FeatureCollection","features":[{"type":"Feature","id":"710000","properties":{"id":"710000","cp":[121.509062,24.044332],"name":"台湾","childNum":6}...}