![cover](https://img-blog.csdnimg.cn/2fce76da74ce45a3b936916a3ba6ea5b.png)
重庆3d地图
echarts重庆3d地图,echarts3d地图
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
效果图:
下载echarts
npm i echarts@4.9.0
导入
import * as echart from 'echarts'
html结构
<div style="width: 19.2rem; height: 10.8rem" id="chongqing-map"></div>
引入重庆的json文件
const dt = require('echarts/map/json/province/chongqing.json')
methods事件
areas数据是通过调用后端接口得到
// 重庆地图
chongqingMap(areas) {
var myChart = echart.init(document.getElementById('chongqing-map'))
echart.registerMap('dt', dt)
const bgColors = [
['#1770b5', '#0f6db2'], // '万州区'
['#2e779e', '#2a7da0'], // '涪陵区'
['#2a9fcb', '#229ecb'], // '渝中区'
['#1fabd5', '#219dc9'], // '大渡口区'
['#23a0cf', '#2eaedc'], // '江北区'
['#24a1cf', '#27a3d3'], // '沙坪坝区'
['#249fce', '#239ac9'], // '九龙坡区'
['#23a1cf', '#2eafdd'], // '南岸区'
['#17a7be', '#18a2b8'], // '北碚区'
['#337ba2', '#3389ae'], // '綦江区'
['#1982b4', '#1e6098'], // '大足区'
['#1ea8d1', '#219eca'], // '渝北区'
['#5197d2', '#5298d3'], // '巴南区'
['#2081b5', '#23629e'], // '黔江区'
['#2892b8', '#2e779e'], // '长寿区'
['#2c689b', '#2c81ad'], // '江津区'
['#2896bd', '#2f7399'], // '合川区'
['#265d9a', '#1f70ae'], // '永川区'
['#2e779e', '#0ea9dd'], // '南川区'
['#297c9e', '#27739c'], // '璧山区'
['#286799', '#2b6597'], // '铜梁区'
['#208cb6', '#24669d'], // '潼南区'
['#187bb8', '#1d59a0'], // '荣昌区'
['#229bbe', '#26779e'], // '梁平县'
['#2797c2', '#296c9e'], // '城口县'
['#2d709e', '#296b9d'], // '丰都县'
['#238fb2', '#267a9f'], // '垫江县'
['#018897', '#0292a2'], // '武隆县'
['#2d6d9f', '#2b6c9d'], // '忠县'
['#24669b', '#1f6597'], // '云阳县'
['#206499', '#1d659a'], // '奉节县'
['#1672ae', '#1b5295'], // '巫山县'
['#2174ad', '#225696'], // '巫溪县'
['#296ba2', '#28689d'], // '石柱土家族自治县'
['#1d6aad', '#236aad'], // '秀山土家族苗族自治县'
['#1d74b0', '#215fa1'], // '酉阳土家族苗族自治县'
['#21719f', '#227ba8'], // '彭水苗族土家族自治县'
['#3392c2', '#2d679e'], // '开州区'
]
const splitList = dt.features.map((v, index) => {
const { name: label } = v.properties
const Area = areas.find(
(v) => v['行政区划'].substr(0, 2) === label.substr(0, 2)
)
return {
label,
start: index,
end: index,
fzl: Area['事故率'],
color: bgColors[index][0],
}
})
var option = {
series: [
{
type: 'map3D',
name: '重庆',
selectedMode: 'single', // 地图高亮单选
boxDepth: 95, // 地图倾斜度
regionHeight: 3, // 地图高度
map: 'dt',
label: {
show: true, // 是否显示市
textStyle: {
color: '#FFFFFF', // 文字颜色
fontSize: 14, // 文字大小
backgroundColor: 'transparent',
},
// 自定义label值
// formatter: '\t{c}\n{b}',
formatter: function ({ data }) {
return (
data.name.substr(0, 2) +
' ' +
data.fzl +
'%'
)
},
},
itemStyle: {
// 渐变色
normal: {
opacity: 0.9,
borderColor: '#DDD',
borderWidth: 1, // 分界线wdith
// areaColor: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// {
// offset: 0,
// color: '#000', // 0% 处的颜色
// },
// {
// offset: 1,
// color: '#fff', // 100% 处的颜色
// },
// ],
// globalCoord: true, // 缺省为 false
// },
},
},
emphasis: {
label: {
show: true, // 是否显示高亮
textStyle: {
color: '#fff', // 高亮文字颜色
},
},
itemStyle: {
show: true, // 是否显示高亮
color: '#FEB65C', // 地图高亮颜色
},
},
symbolSize: [8, 10],
symbol: '../../assets/imgs/zuobiao.png', // 定位小图标
data: splitList.map((v, index) => {
return { name: v.label, value: index, fzl: v.fzl }
}),
shading: 'realistic',
// 真实感材质相关配置 shading: 'realistic'时有效
realisticMaterial: {
detailTexture: '#fff', // 纹理贴图
textureTiling: 1, // 纹理平铺,1是拉伸,数字表示纹理平铺次数
roughness: 1, // 材质粗糙度,0完全光滑,1完全粗糙
metalness: 0, // 0材质是非金属 ,1金属
roughnessAdjust: 0,
},
viewControl: {
distance: 125, // 地图视角 控制初始大小
// rotateSensitivity: 1, // 旋转
zoomSensitivity: 1, // 缩放
// autoRotate: true,
// autoRotateDirection:'ccw'
// 地图平移
panMouseButton: 'left',
rotateMouseButton: 'right',
center: [5, -10, 0],
},
},
],
dataRange: {
show: false,
splitList: splitList,
},
animation: true,
animationDurationUpdate: 5000,
}
myChart.setOption(option)
// myChart.setOption(option)
myChart.on('click', function (e) {
console.log(e)
})
},
注意:echarts不能使用高于4.9.0版本,4.9.0以上版本在依赖包里已经没有地图json数据。
![Logo](https://devpress.csdnimg.cn/6d6d5fb9806b4c6a98afae332dd0efc5.png)
长江两岸老火锅,共聚山城开发者!We Want You!
更多推荐
所有评论(0)