概述
包含：
1) vue3 3d地图显示
2）地图点击后，设置改地图为不同的样式；（也可在地图加载时，不同地区设置不同样式）
3）修改点击后的数据返回；（可以根据此修改地图label的提示信息）
1、3D地图
1、安装依赖
echarts-gl 与 echarts 版本关系：
"echarts": "^5.2.0", "echarts-gl": "^2.0.8"
# 执行安装
yarn add echarts-gl
2、下载离线地图
方式一（更精细）
免费下载实时更新的geoJson数据、行政区划边界数据、区划边界坐标集合__HashTang
https://hxkj.vip/demo/echartsMap/
这里下载的新疆，选项的第一个和第二个都行
方式二
阿里云
http://datav.aliyun.com/portal/school/atlas/area_selector
3、编写页面页面
参考：
vue组件，echarts制作3D地图，可点击凸起，hover高亮，可做飞鱼线（带天空盒子）
https://blog.csdn.net/qq_45234022/article/details/134439469
下载地图重名成 xinjiang.json，粘贴vue项目的 api/json/xinjiang.json 下
实现：3-1 基础展示，3-2 点击区域，高亮显示区域
3-1 基础效果
新建 aa.vue，访问即可看见效果
<template>
<div ref="myChartRef" class="top-title3">地图</div>
</template>
<script name="RoomForm" setup>
import * as echarts from 'echarts'
import 'echarts-gl' // 引入 3D效果
import xinjiangGjson from '@/api/json/xinjiang.json' // 引入地图json数据
// 获取vue3 的 proxy (同 vue2的 this)
const { proxy } = getCurrentInstance()
// 初始化ECharts实例
const myChart1 = ref()
const getOption = () => {
return {
tooltip: {
// 自定义代码
},
series: [
{
type: 'map3D',
name: '地图',
// 相对于父容器比例
center: ['50%', '50%'],
selectedMode: 'single', // 地图高亮单选
regionHeight: 3, // 地图高度
map: 'xinjiangMap',
viewControl: {
// 缩放大小，数值越大，地图越小
distance: 90,
// 上下倾斜角度
alpha: 30,
// rotateSensitivity: [1, 1],
// 左右倾斜角度
beta: 5
},
label: {
show: true, // 是否显示名字
color: '#fff', // 文字颜色
fontSize: 18, // 文字大小
fontWeight: 'normal', // 文字大小
formatter: function (params) {
return `●`
}
},
itemStyle: {
color: '#176efa', // 地图背景颜色
borderWidth: 2, // 分界线wdith
borderColor: '#6254cc', // 分界线颜色
opacity: 1
},
emphasis: {
label: {
show: true, // 是否显示高亮
textStyle: {
color: '#fff' // 高亮文字颜色
}
},
itemStyle: {
color: '#77da7d', // 地图高亮颜色
borderWidth: 10, // 分界线wdith
borderColor: '#6BECF5' // 分界线颜色
}
},
shading: 'realistic',
// 真实感材质相关配置 shading: 'realistic'时有效
realisticMaterial: {
detailTexture: 'https://cdn.polyhaven.com/asset_img/primary/kloppenheim_06_puresky.png?height=780', // 纹理贴图
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
metalness: 0, // 0材质是非金属 ，1金属
roughnessAdjust: 0
},
light: {
main: {
color: '#fff',
intensity: 1,
shadow: true,
shadowQuality: 'high',
alpha: 25, //
beta: 20
},
ambient: {
color: '#fff',
intensity: 0.6
}
}
}
]
}
}
onMounted(() => {
myChart1.value = markRaw(echarts.init(proxy.$refs['myChartRef']))
echarts.registerMap('xinjiangMap', xinjiangGjson) // 注册地图
// 使用刚指定的配置项和数据显示图表
myChart1.value.setOption(getOption())
})
</script>
<style lang="scss" scoped>
.top-title3 {
margin-top: -100px;
width: 900px;
height: 500px;
}
</style>
3-1 预览效果
3-2 点击高亮显示
核心使用 geo3D.regions 单独设置某个区域样式
例如：geo3D.regions = [{ name: ‘和田地图’, itemStyle: { color: ‘#77da7d’ } }]
新建aa.vue，访问页面，点击地图的某个区域
<template>
<div ref="myChartRef" class="top-title3">地图</div>
</template>
<script name="RoomForm" setup>
import * as echarts from 'echarts'
import 'echarts-gl' // 引入 3D效果
import xinjiangGjson from '@/api/json/xinjiang.json' // 引入地图json数据
// 获取vue3 的 proxy (同 vue2的 this)
const { proxy } = getCurrentInstance()
// 初始化ECharts实例
const myChart1 = ref()
const getOption = (regionArray) => {
return {
tooltip: {
// 自定义代码
},
geo3D: {
map: 'xinjiangMap',
roam: true, //是否开启平游或缩放
show: true,
regionHeight: 3, // 地图高度
zlevel: -1, // 必须设置，
viewControl: {
// 缩放大小，数值越大，地图越小
distance: 90,
// 上下倾斜角度
alpha: 30,
// rotateSensitivity: [1, 1],
// 左右倾斜角度
beta: 5
},
label: {
show: false, // 是否显示名字
color: '#fff', // 文字颜色
fontSize: 18, // 文字大小
fontWeight: 'normal', // 文字大小
formatter: function (params) {
return `●`
}
},
itemStyle: {
color: '#176efa', // 地图背景颜色
borderWidth: 2, // 分界线wdith
borderColor: '#6254cc', // 分界线颜色
opacity: 1
},
emphasis: {
label: {
show: true, // 是否显示高亮
textStyle: {
color: '#fff' // 高亮文字颜色
}
},
itemStyle: {
color: '#77da7d', // 地图高亮颜色
borderWidth: 10, // 分界线wdith
borderColor: '#6BECF5' // 分界线颜色
}
},
shading: 'realistic',
// 真实感材质相关配置 shading: 'realistic'时有效
realisticMaterial: {
detailTexture: 'https://cdn.polyhaven.com/asset_img/primary/kloppenheim_06_puresky.png?height=780', // 纹理贴图
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
metalness: 0, // 0材质是非金属 ，1金属
roughnessAdjust: 0
},
light: {
main: {
color: '#fff',
intensity: 1,
shadow: true,
shadowQuality: 'high',
alpha: 25, //
beta: 20
},
ambient: {
color: '#fff',
intensity: 0.6
}
},
regions: regionArray
},
series: [
{
type: 'map3D',
name: '地图',
// 相对于父容器比例
center: ['50%', '50%'],
selectedMode: 'single', // 地图高亮单选
regionHeight: 3, // 地图高度
map: 'xinjiangMap',
viewControl: {
// 缩放大小，数值越大，地图越小
distance: 90,
// 上下倾斜角度
alpha: 30,
// rotateSensitivity: [1, 1],
// 左右倾斜角度
beta: 5
},
label: {
show: false, // 不显示图层2的名称，防止重复设置影响
formatter: (params) => {
return ''
}
}
}
]
}
}
onMounted(() => {
myChart1.value = markRaw(echarts.init(proxy.$refs['myChartRef']))
echarts.registerMap('xinjiangMap', xinjiangGjson) // 注册地图
// 使用刚指定的配置项和数据显示图表
myChart1.value.setOption(getOption([]))
myChart1.value.on('click', function (params) {
console.log(params)
myChart1.value.setOption(getOption([{ name: params.name, itemStyle: { color: '#77da7d' } }]))
})
})
</script>
<style lang="scss" scoped>
.top-title3 {
margin-top: -100px;
width: 900px;
height: 500px;
}
</style>
3-2 点击后预览
点击后，有且只有当前区域高亮
3-3 如果想点击的添加相关属性数据
可在series 添加date的值，这样 监听返回值会有变化，且可自己修改label提示
基于3-2调整如下
const getOption = (regionArray) => {
return {
tooltip: {
// 自定义代码
},
geo3D: {
map: 'xinjiangMap',
roam: true, //是否开启平游或缩放
show: true,
regionHeight: 3, // 地图高度
zlevel: -1, // 必须设置，
viewControl: {
// 缩放大小，数值越大，地图越小
distance: 90,
// 上下倾斜角度
alpha: 30,
// rotateSensitivity: [1, 1],
// 左右倾斜角度
beta: 5
},
label: {
show: false, // 是否显示名字
color: '#fff', // 文字颜色
fontSize: 18, // 文字大小
fontWeight: 'normal', // 文字大小
formatter: function (params) {
return `●`
}
},
itemStyle: {
color: '#176efa', // 地图背景颜色
borderWidth: 2, // 分界线wdith
borderColor: '#6254cc', // 分界线颜色
opacity: 1
},
emphasis: {
label: {
show: true, // 是否显示高亮
textStyle: {
color: '#fff' // 高亮文字颜色
}
},
itemStyle: {
color: '#77da7d', // 地图高亮颜色
borderWidth: 10, // 分界线wdith
borderColor: '#6BECF5' // 分界线颜色
}
},
shading: 'realistic',
// 真实感材质相关配置 shading: 'realistic'时有效
realisticMaterial: {
detailTexture: 'https://cdn.polyhaven.com/asset_img/primary/kloppenheim_06_puresky.png?height=780', // 纹理贴图
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
metalness: 0, // 0材质是非金属 ，1金属
roughnessAdjust: 0
},
light: {
main: {
color: '#fff',
intensity: 1,
shadow: true,
shadowQuality: 'high',
alpha: 25, //
beta: 20
},
ambient: {
color: '#fff',
intensity: 0.6
}
},
regions: regionArray
},
series: [
{
type: 'map3D',
name: '地图',
// 相对于父容器比例
center: ['50%', '50%'],
selectedMode: 'single', // 地图高亮单选
regionHeight: 3, // 地图高度
map: 'xinjiangMap',
viewControl: {
// 缩放大小，数值越大，地图越小
distance: 90,
// 上下倾斜角度
alpha: 30,
// rotateSensitivity: [1, 1],
// 左右倾斜角度
beta: 5
},
label: {
show: false, // 不显示图层2的名称，防止重复设置影响
formatter: (params) => {
return ''
}
},
data: xinjiangGjson.features.map(function (feature) {
return {
name: feature.properties.name,
adcode: feature.properties.adcode,
center: feature.properties.center,
childrenNum: feature.properties.childrenNum,
level: feature.properties.level,
city: feature.properties.city,
subFeatureIndex: feature.properties.subFeatureIndex,
acroutes: feature.properties.acroutes,
value: 666
}
})
}
]
}
}
3766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
