echarts 3d地图不同区域填充不同颜色以及下钻打点解决
中途出现了两个问题,一个是下钻打点之后,移动地图,定位点的位置跟地图出现移位,另一个是打点默认黑色,解决之后在代码里都有说明
<template>
<div>
<div id="map" ref="myEchart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import features from '../../../assets/js/index/shangyu'
let Echarts
export default {
props: {
addressName: {
type: String,
default: ''
}
},
data () {
return {
isArea: true,
areaName: '',
pointData: []
}
},
mounted () {
this.map()
},
methods: {
map () {
let mapJson = features
if (Echarts !== null && Echarts !== '' && Echarts !== undefined) {
Echarts.dispose()
}
if (this.areaName) {
mapJson = {
features: features.features.filter((v) => {
return v.properties.name === this.areaName
})
}
if (this.areaName === '百官街道') {
this.pointData = [
{
name: '文化社区',
value: [120.890766, 30.04924],
pointValue: '98',
flag: true,
img: `image://${require('../../../assets/img/hong.png')}`
},
{
name: '文化新村',
value: [120.878099, 30.028623],
pointValue: '98',
flag: true,
img: `image://${require('../../../assets/img/hong.png')}`
}
]
} else if (this.areaName === '崧厦街道') {
this.pointData = [
{
name: '蔡林村',
value: [120.832713, 30.09329],
pointValue: '98',
flag: true,
img: `image://${require('../../../assets/img/lv.png')}`
},
{
name: '东凌湖村',
value: [120.825199, 30.091851],
pointValue: '93',
flag: true,
img: `image://${require('../../../assets/img/lv.png')}`
}
]
// echarts.registerMap('上虞', mapJson)
} else {}
// 不用定时器进入乡镇街道地图,村社区的点貌似显示不出来
setTimeout(() => {
echarts.registerMap('上虞', mapJson)
this.mapRender()
}, 0)
// echarts.registerMap('上虞', mapJson)
} else {
this.pointData = []
echarts.registerMap('上虞', mapJson)
this.mapRender()
}
},
mapRender () {
const arr = [
{
name: '百官街道',
value: 93,
flag: true
},
{
name: '东关街道',
value: 93,
flag: true
},
{
name: '曹娥街道',
value: 90,
flag: true
},
{
name: '道墟街道',
value: 99,
flag: true
},
{
name: '小越街道',
value: 96,
flag: true
},
{
name: '梁湖街道',
value: 96,
flag: true
},
{
name: '崧厦街道',
value: 88,
flag: true
},
{
name: '章镇镇',
value: 97,
flag: true
},
{
name: '丰惠镇',
value: 98,
flag: true
},
{
name: '上浦镇',
value: 99,
flag: true
},
{
name: '汤浦镇',
value: 89,
flag: true
},
{
name: '永和镇',
value: 97,
flag: true
},
{
name: '驿亭镇',
value: 98,
flag: true
},
{
name: '谢塘镇',
value: 98,
flag: true
},
{
name: '盖北镇',
value: 96,
flag: true
},
{
name: '长塘镇',
value: 91,
flag: true
},
{
name: '下管镇',
value: 88,
flag: true
},
{
name: '丁宅乡',
value: 83,
flag: true
},
{
name: '岭南乡',
value: 96,
flag: true
},
{
name: '陈溪乡',
value: 97,
flag: true
}
]
const option = {
tooltip: {
show: true,
formatter: (params) => {
let value = ''
if (params.seriesType === 'scatter3D') {
value = params.data.pointValue
} else {
value = params.value
}
return `<div style="position:absolute;left:0;top:0;width:8px;height:8px;background-color:#FD9A5A;"></div>
<div class='tips' style="padding:0 12px;color: #fff;">
<h1 style='font-size:16px;'>${params.name}</h1>
<p style="font-size:14px;"><span>指数:</span>${value}</p>
</div>`
},
borderColor: '#000080',
borderWidth: 1,
padding: [0, 0],
backgroundColor: '#1B212B',
borderRadius: 0
// textStyle: { color: "blue" },
},
// backgroundColor: '#fff',
visualMap: {
show: false,
type: 'piecewise',
seriesIndex: [0], // 指定取哪个系列的数据,即哪个系列的 series.data,不加这个打点会默认黑色,这个问题也找了好久才解决的
// inRange: {
// color: ['#7F1000', '#BD1317', '#E64C45', '#FF8C71', '#FDD29F']
// }
// 根据arr数组里的value值渲染不同
pieces: [
{
max: 85,
color: '#FF0000'
},
{
min: 85,
max: 90,
color: '#FACC14'
},
{
min: 90,
max: 95,
color: '#5FFA14'
},
{
min: 95,
max: 100,
color: '#096DD9'
},
{
min: 100,
color: '#000080'
}
]
},
// 这里之所以要加个geo3D是为了让series中的scatter3D跟map3D的坐标系保持一致,鼠标旋转过程中不会出现移位
geo3D: {
show: false, // 隐藏该层,为true时会出现两个地图
type: 'map3D',
map: '上虞',
regionHeight: 2.5, // 模型的高度
boxWidth: 35, // 三维地图在三维场景中的宽度
boxHeight: 122,
boxDepth: 60, // 三维地图在三维场景中的深度
top: '-10%',
// left:'10%',
shading: 'lambert',
label: {
show: false, // 是否显示标签。
position: ['50%', '50%'],
formatter: (params) => {
return params.areaname
},
textStyle: {
color: 'rgba(255,255,255,1)', // 地图初始化区域字体颜色
fontSize: 12,
opacity: 1,
// backgroundColor: '#1B212B',
// borderColor: '#998484',
// borderWidth: 1,
position: 'insideTop',
padding: [2, 4],
borderRadius: 0,
distanca: 20
},
emphasis: {
// 对应的鼠标悬浮效果
show: false,
color: '#fff',
fontSize: 18
}
},
itemStyle: {
normal: {
// 静态模式下显示的默认样式
borderWidth: 1.6,
borderColor: '#09417F',
color: '#00254b'
// opacity: 1
}, // 阴影效果
emphasis: {
/// /鼠标移上去的样式
borderWidth: 1.6,
borderColor: '#95FFFF',
color: '#f2d5ad',
textStyle: {
// color: 'blue'
}
}
},
viewControl: {
// 用于鼠标的旋转,缩放等视角控制。
autoRotate: false, // 是否开启视角绕物体的自动旋转查看
distance: 60, // 默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离,对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
alpha: 50, // 视角绕 x 轴,即上下旋转的角度。配合 beta 可以控制视角的方向
beta: -60 // 视角绕 y 轴,即左右旋转的角度
},
zlevel: 1
},
series: [
{
name: 'shangyu',
type: 'map3D',
map: '上虞', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
data: arr,
geo3DIndex: 0,
zlevel: 1,
regionHeight: 2.5, // 模型的高度
boxWidth: 35, // 三维地图在三维场景中的宽度
boxHeight: 122,
boxDepth: 60, // 三维地图在三维场景中的深度
top: '-10%',
// left:'10%',
shading: 'lambert',
label: {
show: true, // 是否显示标签。
position: ['50%', '50%'],
formatter: (params) => {
return params.areaname
},
textStyle: {
color: 'rgba(255,255,255,1)', // 地图初始化区域字体颜色
fontSize: 12,
opacity: 1,
position: 'insideTop',
padding: [2, 4],
borderRadius: 0,
distanca: 20
},
emphasis: {
// 对应的鼠标悬浮效果
show: true,
color: '#fff',
fontSize: 12
}
},
itemStyle: {
normal: {
borderWidth: 1.6,
borderColor: '#09417F',
color: '#00254b'
},
emphasis: {
borderWidth: 1.6,
borderColor: '#95FFFF',
color: '#f2d5ad'
}
},
viewControl: {
// 用于鼠标的旋转,缩放等视角控制。
autoRotate: false, // 是否开启视角绕物体的自动旋转查看
// autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向,也可以取 'ccw',既从上往下看为逆时针方向。
// autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒,默认为10 ,也就是36秒转一圈。
// autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
// orthographicSize: 110, // 控制地图大小
// maxOrthographicSize: 110,
// minOrthographicSize: 110,
// rotateSensitivity: 0,
distance: 60, // 默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离,对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
alpha: 50, // 视角绕 x 轴,即上下旋转的角度。配合 beta 可以控制视角的方向
beta: -60 // 视角绕 y 轴,即左右旋转的角度
}
},
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
geo3DIndex: 0,
data: this.pointData,
// 这里可以自定义打点的图片
// symbol: function (value, params) {
// const t = params.data.img
// return t
// },
symbol: 'pin',
symbolSize: [14, 14],
label: {
show: false
},
itemStyle: {
color: '#000080',
opacity: 1
},
emphasis: {
label: {
show: false,
formatter: function (params) {
const t = params.data.name
return t
},
color: '#fff',
fontSize: 16
},
itemStyle: {
zoom: 1.2
}
},
zlevel: 10,
viewControl: {
orthographicSize: 110, // 控制地图大小
maxOrthographicSize: 110,
minOrthographicSize: 110,
rotateSensitivity: 0
}
}
]
}
Echarts = echarts.init(this.$refs.myEchart)
Echarts.setOption(option)
window.onresize = Echarts.resize()
Echarts.off('click')
Echarts.on('click', (e) => {
this.$emit('changeCondition', e)
if (this.isArea && e.seriesType === 'map3D') this.renderMap(e.name)
// if (this.isArea) this.renderMap(e)
if (arr.length > 0) {
// 选中高亮
this.$emit('changeMap', e.name)
if (option.series[0].data.length > 0) {
Echarts.clear()
Echarts.setOption(option)
}
}
})
renderMap (name) {
if (name !== '上虞' && name) {
this.isArea = false
this.areaName = name
this.map()
this.$emit('changeMap', name)
}
}
}
}
</script>