(相关资料图)
Echarts创建中国3D地图
客户需要做一版3D中国地图，地图要倾斜角度，然后可以支持点击省份，对地图两侧的图表数据进行切换，此外还有一些纹理，顶牌信息面板的效果，不一一赘述，末尾我会放一张成品的图片。
地图数据
Echarts官网迁移后，地图的json数据已经不翼而飞了，所以在开发地图图表时，要先找一份地图的json数据，阿里的网站就有，直接去下载就好了。链接：http://datav.aliyun.com/portal/school/atlas/area_selectorjson下载完成后，要在Echarts对象初始化的时候注册一下，代码如下：
import china from "../../../public/mock/map/china.json" // 导入地图json数据import * as echarts from "echarts"echarts.registerMap("china", china)
组件代码
<script>import china from "../../../public/mock/map/china.json"import * as echarts from "echarts"import tietu1 from "../../assets/imgs/home/123.jpg"import video from "../../assets/imgs/map/map_bg.mp4"import video2 from "../../assets/imgs/map/map_bg2.mp4"import video3 from "../../assets/imgs/map/map_bg3.mp4"import video4 from "../../assets/imgs/map/map_bg4.mp4"import markerImg from "../../assets/imgs/map/3d_marker_bg.png"import axiosAPI from "../../axios"import { useModule } from "../../store/useModule"export default { props: { config: { type: Object, default: () => ({ width: 7600, height: 2160 }), }, }, setup() { const moduleStore = useModule() let dataMaps = [ { name: "北京", value: 457, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "天津", value: 120, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "河北", value: 421, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "山西", value: 413, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "内蒙古", value: 484, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "辽宁", value: 106, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "吉林", value: 18, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "黑龙江", value: 98, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "上海", value: 331, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "江苏", value: 164, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "浙江", value: 4, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "安徽", value: 26, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "福建", value: 492, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "江西", value: 48, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "山东", value: 132, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "河南", value: 309, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "湖北", value: 35, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "湖南", value: 11, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "重庆", value: 16, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "四川", value: 383, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "贵州", value: 209, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "云南", value: 365, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "西藏", value: 421, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "陕西", value: 144, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "甘肃", value: 472, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "青海", value: 182, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "宁夏", value: 282, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "新疆", value: 51, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "广东", value: 110, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "广西", value: 453, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "海南", value: 356, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "台湾", value: 342, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "香港", value: 406, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, { name: "澳门", value: 223, itemStyle: { color: "rgba(167, 204, 255, 1)", opacity: 1, borderWidth: 2, borderColor: "rgba(167, 204, 255, 1)", // 地图边配色 } }, ] const state = reactive({ videos: [video, video2, video3, video4], videoUrl: window.yunyingzhihuizhongxin.videoUrl, infoData: [], }) const getData = async () => { const res = await axiosAPI.get(window.yunyingzhihuizhongxin.URLs.china3D) if (res.code === 200) { state.infoData = res.data.data } } const timer = setInterval(getData, window.yunyingzhihuizhongxin.looping.china3D * 1000) const addcomma = (num) => (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,") const convertData = (data) => { const res = [] for (let i = 0; i < data.length; i++) { res.push({ name: data[i].name, value: data[i].lonlat, value1: data[i].value1, value2: data[i].value2, label1: data[i].label1, label2: data[i].label2, label: { show: true, position: "top", distance: 0, backgroundColor: { image: markerImg, }, width: 414, height: 176, formatter(param) { return `{sty1|${param.data.label1}} {sty2|${param.data.label2}} {sty3|${addcomma(param.data.value1)}} {sty4|${addcomma(param.data.value2)}}` }, rich: { sty1: { fontSize: 32, padding: [15, 0, 0, 20], color: "rgba(23, 31, 44, 1)", fontFamily: "SourceHanSansCN-Bold, sans-serif", fontWeight: 500, align: "left", }, sty2: { color: "rgba(23, 31, 44, 1)", padding: [-39, 20, 0, 0], fontSize: 32, fontFamily: "SourceHanSansCN-Bold, sans-serif", fontWeight: 500, align: "right", }, sty3: { fontSize: 58, padding: [15, 0, 0, -95], fontFamily: "DINPro-Medium, sans-serif", fontWeight: 500, color: "#FFFFFF", align: "left", }, sty4: { fontSize: 58, padding: [-70, 20, 0, 0], fontFamily: "DINPro-Medium, sans-serif", fontWeight: 500, color: "#FFFFFF", align: "right", }, }, }, }) } return res } let myChart const init = () => { if (!myChart) { myChart = echarts.init(document.getElementById("echarts")) echarts.registerMap("china", china) myChart.on("click", "series.map3D", params => { let newOption = myChart.getOption() newOption.geo3D[0].regions.forEach(region => { if (params.data.name === region.name) { if (region.itemStyle.borderWidth === 6) { region.itemStyle.color = "rgba(167, 204, 255, 1)" region.itemStyle.borderColor = "rgba(167, 204, 255, 1)" region.itemStyle.borderWidth = 2 } else { region.itemStyle.color = "#76ddff" region.itemStyle.borderColor = "#76ddff" region.itemStyle.borderWidth = 6 } } else { region.itemStyle.color = "rgba(167, 204, 255, 1)" region.itemStyle.borderColor = "rgba(167, 204, 255, 1)" region.itemStyle.borderWidth = 2 } }) moduleStore.currentMapChoose === params.data.name ? moduleStore.changeCurrentMapChoose("china") : moduleStore.changeCurrentMapChoose(params.data.name) myChart.setOption(newOption, true) }) } if (moduleStore.currentMapChoose !== "china") { dataMaps.forEach(region => { if (region.name === moduleStore.currentMapChoose) { region.itemStyle.color = "#76ddff" region.itemStyle.borderColor = "#76ddff" region.itemStyle.borderWidth = 6 } }) } const option = { visualMap: { show: false, symbolSize: [15, 30], pieces: [ // 自定义每一段的范围，以及每一段的文字 { gte: 300, label: "1000-9999人", color: "rgba(82, 104, 134, 0.8)" }, { gte: 200, lte: 299, label: "500-999人", color: "rgba(82, 104, 134, 0.8)" }, { gte: 100, lte: 199, label: "100-499人", color: "rgba(82, 104, 134, 0.8)" }, { gte: 10, lte: 99, label: "10-99人", color: "rgba(82, 104, 134, 0.8)" }, // 不指定 min，表示 min 为无限大（-Infinity）。 { lte: 9, label: "1-9人", color: "rgba(82, 104, 134, 0.8)" }, ], }, geo3D: { show: true, type: "map3D", map: "china", regionHeight: 4, shading: "realistic", height: 2800, top: -500, label: { // 标签的相关设置 show: true, // (地图上的城市名称)是否显示标签 [ default: false ] formatter(param) { const city = (param.name).substr(0, 3) return city === "香港" ? `{sty1|${city}}` : `{sty2|${city}}` }, rich: { sty1: { color: "#ffffff", fontSize: 28, fontFamily: "SourceHanSansCN-Regular, sans-serif", align: "right", backgroundColor: "transparent", width: 120, }, sty2: { color: "#ffffff", fontSize: 28, fontFamily: "SourceHanSansCN-Regular, sans-serif", align: "center", }, }, }, roam: true, zoom: 2, realisticMaterial: { detailTexture: tietu1, // 纹理贴图 textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙 metalness: 1, // 0材质是非金属 ，1金属 roughnessAdjust: 0, }, // 鼠标hover高亮 emphasis: { label: { show: true, // (地图上的城市名称)是否显示标签 [ default: false ] }, itemStyle: { areaColor: "#61A4E4", // color: "#61A4E4", borderColor: "#88BAEA", borderWidth: 2, }, }, light: { // 光照相关的设置。在 shading 为 "color" 的时候无效。 // 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。 main: { // 场景主光源的设置，在 globe 组件中就是太阳光。 color: "#fff", // 主光源的颜色。[ default: #fff ] intensity: 4, // 主光源的强度。[ default: 1 ] shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。 alpha: 150, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ] beta: 90, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ] shadowQuality: "high", }, ambient: { // 全局的环境光设置。 color: "#fff", // 环境光的颜色。[ default: #fff ] intensity: 1, // 环境光的强度。[ default: 0.2 ] }, }, viewControl: { autoRotate: false, // 自动旋转 // autoRotateAfterStill: 10, // 静止时间后自动旋转 animation: true, alpha: 45, // 视角绕 x 轴，即上下旋转的角度 beta: 5, // 视角绕 y 轴，即左右旋转的角度 distance: 90, // 视角距离主体的距离 rotateSensitivity: 0, zoomSensitivity: 0, }, regions: dataMaps, data: [], // silent: true, }, series: [ { show: true, type: "map3D", map: "china", regionHeight: 4, shading: "realistic", itemStyle: { opacity: 0, }, height: 2800, top: -500, label: { // 标签的相关设置 show: true, // (地图上的城市名称)是否显示标签 [ default: false ] formatter(param) { const city = (param.name).substr(0, 3) return city === "香港" ? `{sty1|${city}}` : `{sty2|${city}}` }, rich: { sty1: { color: "#ffffff", fontSize: 28, fontFamily: "SourceHanSansCN-Regular, sans-serif", align: "right", backgroundColor: "transparent", width: 120, }, sty2: { color: "#ffffff", fontSize: 28, fontFamily: "SourceHanSansCN-Regular, sans-serif", align: "right", height: 150, width: 100, backgroundColor: "transparent", verticalAlign: "top", }, }, }, roam: true, zoom: 2, realisticMaterial: { detailTexture: tietu1, // 纹理贴图 textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙 metalness: 1, // 0材质是非金属 ，1金属 roughnessAdjust: 0, }, // 鼠标hover高亮 emphasis: { label: { show: true, // (地图上的城市名称)是否显示标签 [ default: false ] }, itemStyle: { areaColor: "#61A4E4", // color: "#61A4E4", borderColor: "#88BAEA", borderWidth: 2, }, }, light: { // 光照相关的设置。在 shading 为 "color" 的时候无效。 // 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。 main: { // 场景主光源的设置，在 globe 组件中就是太阳光。 color: "#fff", // 主光源的颜色。[ default: #fff ] intensity: 4, // 主光源的强度。[ default: 1 ] shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。 alpha: 150, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ] beta: 90, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ] shadowQuality: "high", }, ambient: { // 全局的环境光设置。 color: "#fff", // 环境光的颜色。[ default: #fff ] intensity: 1, // 环境光的强度。[ default: 0.2 ] }, }, viewControl: { autoRotate: false, // 自动旋转 // autoRotateAfterStill: 10, // 静止时间后自动旋转 animation: true, alpha: 45, // 视角绕 x 轴，即上下旋转的角度 beta: 5, // 视角绕 y 轴，即左右旋转的角度 distance: 90, // 视角距离主体的距离 rotateSensitivity: 0, zoomSensitivity: 0, }, regions: dataMaps, data: [], zlevel: 1, // silent: true, }, // 叠加地图上需要显示的数据，插牌 { type: "scatter3D", name: "scatter3D", coordinateSystem: "geo3D", symbol: "pin", symbolSize: 0, label: {}, data: convertData(state.infoData), }, ], } // 把option设置给myChart实例 myChart.setOption(option, true) } watch(() => state.infoData, () => { init() }) // 加载完就调用的方法 vue3生命周期 onMounted(() => { getData() }) onBeforeUnmount(() => { clearInterval(timer) }) return { ...toRefs(state), } },}</script>
成品图
如下所示：
关键词：
