缺点:引出线(虚线)和提示框 ,以及 涟漪是2D 的,所以地图是不能旋转和缩放的,否则就会乱套
以下图就是错误示范:
上代码:
<template>
<div class="bg">
<div id="threeDmap"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl"; //3D地图插件
import { mapJson } from "../../../../assets/js/map_js/gansu.js";
import icon from "../../../../assets/img/icon.png";
export default {
data() {
return {};
},
mounted() {
this.$nextTick(() => {
this.getMap();
});
},
methods: {
getMap() {
var dom = document.getElementById("threeDmap");
var myChart = echarts.init(dom);
var option;
var geoJson = mapJson;
myChart.showLoading();
myChart.hideLoading();
echarts.registerMap("gansu", geoJson);
myChart.setOption(
(option = {
geo3D: {
map: "gansu",
roam: false,
zlevel: "8",
itemStyle: {
color: "#0479B1",
opacity: 1,
borderWidth: 0.4,
borderColor: "#000",
},
// 动画效果
viewControl: {
autoRotate: false,
// autoRotateAfterStill: 3,
// distance: 95, //可以改变地图远近距离---即大小
// minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
// alpha: 20, //Y轴旋转
// maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
// minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
// beta: 0, //x轴旋转
// maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
// animation: false, // 是否开启动画。[ default: true ]
// animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
// animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
panMouseButton: "center", //平移操作使用的鼠标按键
rotateMouseButton: "left", //旋转操作使用的鼠标按键
rotateSensitivity: 0, //禁止旋转地图
zoomSensitivity: "0", //实现禁止缩放地图
},
// 鼠标经过样式
emphasis: {
disabled: true, //是否可以被选中
label: {
//移入时的高亮文本
show: true,
color: "#333", //显示字体颜色
fontSize: 14, //显示字体
},
itemStyle: {
color: "#fff", //显示移入的区块变白色
},
},
select: {
disabled: true, //不能点击地图
},
label: {
show: true,
position: "top",
color: "#333", //地图初始化区域字体颜色
fontSize: 14,
},
shading: "lambert",
light: {
//光照阴影
main: {
// color: "#fff", //光照颜色
intensity: 0.8, //光照强度
shadow: true, //是否显示阴影
shadowQuality: "height", //阴影质量 ultra //阴影亮度
alpha: 40,
beta: 10,
},
ambient: {
intensity: 0.7,
},
},
// 对不同的区块进行着色
regions: [
{
name: "酒泉市",
itemStyle: {
color: "#0DF5FF",
},
},
{
name: "嘉峪关市",
itemStyle: {
color: "#0EEAF2",
},
},
{
name: "张掖市",
itemStyle: {
color: "#0EEAF2",
},
},
{
name: "金昌市",
itemStyle: {
color: "#07CEE1",
},
},
{
name: "武威市",
itemStyle: {
color: "#0CB0D1",
},
},
{
name: "庆阳市",
itemStyle: {
color: "#08A2C8",
},
},
{
name: "白银市",
itemStyle: {
color: "#08A2C8",
},
},
{
name: "兰州市",
itemStyle: {
color: "#08A2C8",
},
},
{
name: "定西市",
itemStyle: {
color: "#0B95C2",
},
},
{
name: "临夏回族自治州",
itemStyle: {
color: "#0B95C2",
},
},
{
name: "平凉市",
itemStyle: {
color: "#0593C0",
},
},
{
name: "天水市",
itemStyle: {
color: "#0484B9",
},
},
{
name: "甘南藏族自治州",
itemStyle: {
color: "#0484B9",
},
},
],
},
// 这个地图在页面中看不到,只是为了定位lines(2D的虚线引出线和提示框) 和 涟漪
geo: {
zlevel: "8",
show: true,
map: "gansu",
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "100%", //地图大小
roam: false,
label: {
// show: true,
fontFamily: " Microsoft YaHei",
fontSize: 12,
color: "#fff",
},
itemStyle: {
//每一块区域的样式
normal: {
areaColor: "rgba(255,255,255,0)",
borderColor: "rgba(255,255,255,0)",
borderWidth: 0,
},
},
// 鼠标经过样式--区域颜色、和提示
emphasis: {
label: {
show: false,
},
itemStyle: {
borderColor: "rgba(255,255,255,0)",
areaColor: "rgba(255,255,255,0)",
},
},
select: {
disabled: true, //不能点击地图
},
},
series: [
// 线的样式
{
type: "lines",
coordinateSystem: "geo",
zlevel: "8",
effect: {
show: true,
period: 2, //箭头指向速度,值越小速度越快
trailLength: 0.1, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: "triangle", //箭头图标
symbolSize: 10, //图标大小
color: "rgba(255,255,255,0)", // 图标颜色
},
lineStyle: {
type: [3, 5],
dashOffset: 5,
show: true,
width: 2.5, //尾迹线条宽度
opacity: 0.4, //尾迹线条透明度
curveness: -0.5, //尾迹线条曲直度
color: "#ABF9BF", // 飞线颜色
},
label: {
show: true,
position: "start",
formatter: function (params) {
//文本提示框
return (
"\n\n{title|" +
"甘肃东方韵药业科技有限公司" +
"}\n{value|" +
"" +
"}"
);
},
width: 90,
height: 275,
align: "center",
rich: {
//标题样式
title: {
width: 100,
align: "center",
lineHeight: 30,
fontSize: 14,
fontWeight: "bold",
color: "#00FFFB",
padding: [3, 4, 30, 6],
},
value: {
//内容样式
height: 90,
width: 60,
backgroundColor: {
image: icon,
},
},
},
},
data: [
{
coords: [
[108, 40], // 起点
[97, 39.744023], // 终点
],
},
],
},
{
type: "effectScatter",
coordinateSystem: "geo",
effectType: "ripple", //涟漪特效
showEffectOn: "render",
// 散点样式
rippleEffect: {
color: "#A5F590",
period: 2, // 涟漪特效的动画周期
scale: 8, // 涟漪特效动画中波纹的最大缩放比例
brushType: "fill", // 涟漪特效的波纹绘制方式
},
// 散点大小
symbolSize: 5,
hoverAnimation: true,
// 标志的样式
itemStyle: {
color: "rgba(255,255,255, .7)",
},
zlevel: 9,
data: [{ value: [97, 39.744023] }],
},
],
})
);
if (option && typeof option === "object") {
myChart.setOption(option);
}
},
},
};
</script>
<style lang="sss" scoped>
.bg {
width: 100%;
height: 88vh;
background: url("../../../../assets/img/bj.png") no-repeat center;
background-size: 100% 100%;
}
#threeDmap {
width: 750px;
height: 500px;
}
</style>