echarts展示市级地图2d和3d
2022-06-01 本文已影响0人
月下小酌_dbd5
- 安装echarts
npm i echarts -s
- 安装3d插件
npm i echarts-gl -s
- 获取json地图数据 （https://datav.aliyun.com/portal/school/atlas/area_selector） 这里我放在@/views/utils文件夹下
加载2D地图
<template>
<div class="my-map-box">
<div id="myMap" class="my-map-charts"></div>
</div>
</template>
<script lang='ts' setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts';
import 'echarts-gl';
// 获取地图数据
let json = require('@/utils/hangzhou.json');
let myChartMap: any = null;//地图
let optionMap = {
geo: {
map: '浙江杭州',
roam: false,
zoom: 1.2,
scaleLimit: { //缩放级别限制
min: 1,
// max: 12
},
aspectScale: 1.1, //地图的长宽比
itemStyle: {
opacity: 1,
borderWidth: 1,
borderColor: '#a0cfff', //边框颜色
areaColor: '#337ecc', //地图区域颜色
shadowColor: '#000',
// shadowOffsetX: 1,
// shadowOffsetY: 1,
},
label: {
color: '#fff',
fontWeight: 'bold',
show: true,
},
emphasis: {
itemStyle: {
show: 'true',
borderWidth: 1,
borderColor: '#a0cfff', //边框颜色
areaColor: '#337ecc66', //鼠标移上去的颜色
},
label: {
color: '#fff',
fontWeight: 'bold',
show: true,
}
},
},
series: {
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 5,
rippleEffect: { //坐标点动画
period: 3,
scale: 5,
brushType: 'fill'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: 'orange',
fontWeight: "bold",
fontSize: 18
}
},
data: [{
name: "标注1",
dataList: { describe: '标注1呀呀呀' },
value: [119.315548, 29.670309]
},
{
name: "标注2",
dataList: { describe: '标注2呀呀呀' },
value: [118.98148, 29.359218]
},
],
itemStyle: { //坐标点颜色
normal: {
show: true,
color: 'orange',
shadowBlur: 10,
shadowColor: '#fff'
},
},
},
}
// 初始化地图
const initMap = () => {
myChartMap = echarts.init(document.getElementById('myMap'));
echarts.registerMap('浙江杭州', json);
myChartMap.setOption(optionMap);
window.addEventListener("resize", () => {
myChartMap.resize();
});
}
onMounted(() => {
initMap()
myChartMap.on('click', (data: any) => {
if (data.componentType == 'series') {
console.log(data);
}
});
})
</script>
<style scoped lang='less'>
.my-map-box {
width: 99vw;
height: 800px;
display: flex;
justify-content: center;
background-color: #000;
.my-map-charts {
width: 900px;
height: 600px;
}
}
</style>
-
结果
image.png
加载3D地图
<template>
<div class="my-module3" id="echarts_map">
</div>
</template>
<script lang='ts' setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts';
import 'echarts-gl';
// 获取地图数据
let cityJson = require('@/utils/hangzhou.json');
// 地图
let chart: any = null;
// 图表配置
let options: any = {};
// geo3d + map3d公用图表配置
const setting: any = {
top: '0%',
left: '0%',
right: '0%',
bottom: '0%',
distance: 90,
alpha: 50,
beta: 30,
regionHeight: 6,
}
// 适配不同尺寸浏览器，避免地图上的字号过小或过大
const getSize = (res: any) => {
const docEl = document.documentElement;
const clientWidth = window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth;
if (!clientWidth) return;
const fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
//标注点--标签名样式
const markerLable = {
show: true,
position: 'top',
distance: 3,
top: 10,
formatter: (params: any) => {
return `{sty1|${params.data.name}}`;
},
rich: {
sty1: {
padding: getSize(0.07),
backgroundColor: ' rgb(14, 34, 72,0.9)',
borderWidth: 1,
borderColor: '#163470',
borderRadius: 2,
fontSize: getSize(0.14),
},
},
}
// 获取图表配置
const getOptions = () => {
const options = {
tooltip: {
show: true,
triggerOn: 'click',
trigger: 'item',
extraCssText: 'width:150px;height:auto;border-radius: 1px; background: rgb(14, 34, 72,0.9);border:1px solid #163470;color:#fff',
formatter: (params: any) => {
console.log('tip提示', params)
return `
<div style="text-align: left;">
<div style="font-size: 16px;display:flex;align-items: center;margin-bottom:6px;">
<div style="width:3px;height:14px;background-color: #0DD2E6; border-radius: 1.5px;margin-right: 5px;"></div>
<div>${params.name}</div>
</div>
<div style="font-size: 14px;">
<span style="color: #8299BF;">地址：</span>
<span>莫干山路</span>
</div>
<div style="font-size: 14px;">
<span style="color: #8299BF;">进行中项目：</span>
<span>多仓联动</span>
</div>
<div style="font-size: 14px;">
<span style="color: #8299BF;">项目完成度：</span>
<span>80%</span>
</div>
<div style="font-size: 14px;">
<span style="color: #8299BF;">备注：</span>
<span>哈哈</span>
</div>
</div>`
}
},
textStyle: {
color: '#ffffff', // 高亮时标签颜色变为 白色
fontSize: 26, // 高亮时标签字体 变大
},
// 地图主要配置
geo3D: {
show: true,
map: 'map',
boxHeight: 10,
top: setting.top,
right: setting.right,
left: setting.left,
bottom: setting.bottom,
regionHeight: setting.regionHeight, // 三维高度
shading: 'realistic',
realisticMaterial: {
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
},
label: { // 标签的相关设置
show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
distance: 20,
formatter(params: any) {
return `{sty1|${params.name}}`
},
rich: {
sty1: {
color: '#ffffff',
fontSize: getSize(0.16),
align: 'center',
},
},
},
itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: '#4282da', // 地图板块的颜色
// color: '#00F6FF',
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
borderColor: '#6be1f1', // 图形描边的颜色。[ default: #333 ]
},
emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
label: { // label高亮时的配置
show: true,
formatter(params: any) {
return `{sty1|${params.name}}`
},
rich: {
sty1: {
color: 'blue',
fontSize: getSize(0.18),
align: 'center',
},
},
},
},
light: {
// 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
main: {
// 场景主光源的设置，在 globe 组件中就是太阳光。
color: "#fff", //主光源的颜色。[ default: #fff ]
intensity: 2.5, //主光源的强度。[ default: 1 ]
shadow: true, //主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
// shadowQuality: 'low', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
alpha: 20, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 100, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
},
},
viewControl: {
projection: 'perspective',
distance: setting.distance,
beta: setting.beta,
alpha: setting.alpha,
maxDistance: 100,
minDistance: 10,
},
},
series: [
// 叠加地图上需要显示的数据，插牌
{
type: 'scatter3D',
name: 'scatter3D',
coordinateSystem: 'geo3D',
symbol: 'path://M512 66.56c-175.31904 0-317.44 142.12096-317.44 317.44 0 175.31904 175.13984 361.22624 317.44 448.7936 164.19328-120.40704 317.44-273.47968 317.44-448.7936 0-175.31904-142.12096-317.44-317.44-317.44z m0 437.84704c-63.47776 0-114.93376-51.46112-114.93376-114.93376 0-63.47776 51.46112-114.93376 114.93376-114.93376 63.47776 0 114.93376 51.456 114.93376 114.93376S575.47776 504.40704 512 504.40704z',
showAllSymbol: true,
silent: false,
symbolSize: [28, 33],
// symbolRotate: 10,
// symbolSize: 28,
itemStyle: {
color: '#da8c07',
animationDuration: 0,
opacity: 1,
},
data: [
{
name: "标注1",
value: [119.315548, 29.670309, 50],
label: markerLable,
emphasis: {
label: markerLable,
}
},
{
name: "标注2333",
value: [118.98148, 29.359218, 50],
label: markerLable,
emphasis: {
label: markerLable,
}
},
],
},
],
};
return options;
}
// 初始化图标
const initMap = () => {
if (chart) {
chart.clear();
}
let mapDiv: any = document.getElementById('echarts_map')
chart = echarts.init(mapDiv);
chart.showLoading({
maskColor: 'rgba(0, 0, 0, 0.2)',
});
echarts.registerMap('map', cityJson);
chart.hideLoading();
options = getOptions();
chart.setOption(options);
}
onMounted(() => {
initMap()
})
</script>
<style scoped lang='less'>
.my-module3 {
box-sizing: border-box;
height: 800px;
.my-title {
text-align: left;
color: #fff;
margin-bottom: 10px;
}
.my-content {
width: 100%;
height: 95%;
text-align: left;
// background-color: #00000055;
// color:#fa4f04;
}
}
// 标注弹窗
.marker-tip-box {
width: 200px;
height: 100px;
background-color: transparent;
text-align: left;
border-radius: 1px;
background-color: #00000088;
.tip-name {
font-size: 16px;
color: rgb(14, 34, 72);
}
.tip-con-item {
font-size: 14px;
.item-title {
color: #8299BF;
}
}
}
</style>
-
结果
image.png
