- 1、展示长沙市开福区街道地图,需要自己描街道数据
- 2、地图需要立体感觉,两层叠加
- 3、地图区域使用纹理图片填充,点击高亮
- 4、地图标点政府展示五角星图表,其他点使用点
- 5、地图标点的文字需要特殊样式设置
// map.vue 组件
<template>
<div class="w100 h100" />
</template>
<script>
import resize from "./mixins/resize";
import axios from "axios";
// 地图的纹理背景图
import { bgImg } from "./js/index"; // base64格式数据
var mapBg = document.createElement("img");
mapBg.style.height = mapBg.height = mapBg.width = mapBg.style.width = "8px";
mapBg.src = bgImg;
// 标点政府的五角星
let star = "image://" + require("@/views/screen/components/img/star.png");
export default {
mixins: [resize],
data() {
return {
chart: null,
// 散点数据
scatterData: [
{
name: "开福区人民政府",
value: [112.991735, 28.26299],
},
],
scatterData1: [
{
name: "马栏山文化创意产业园",
value: [113.037663, 28.227175],
},
{
name: "马栏山产业园",
value: [112.991735, 28.30299],
},
{
name: "马栏山产业园",
value: [113.041735, 28.35299],
},
],
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
async initChart() {
this.chart = this.$echarts.init(this.$el);
let { data } = await axios.get("/map.json");
this.$echarts.registerMap("kaifuqu", data); // 1、注意名字保持一致
this.chart.setOption({
geo: [
{
map: "kaifuqu", // 2、注意名字保持一致
roam: false, //是否允许缩放
zoom: 1.15, //默认显示级别
scaleLimit: {
min: 1,
max: 3,
}, //缩放级别
itemStyle: {
normal: {
areaColor: "#12235c",
borderColor: "#57FFFD",
borderWidth: this.fontSize(0.015),
shadowColor: "rgb(58,115,192)", // 底层地图的阴影,为了立体效果
shadowOffsetX: this.fontSize(0.1),
shadowOffsetY: this.fontSize(0.11),
},
emphasis: {
areaColor: "#2AB8FF",
borderWidth: 0,
color: "green",
},
},
},
],
series: [
{
type: "map", //该对象是第二层地图,为了实现立体效果,两层地图叠加
roam: false,
zoom: 1.15, //默认显示级别
scaleLimit: {
min: 1,
max: 3,
}, //缩放级别
map: "kaifuqu", // 3、注意名字保持一致
itemStyle: {
normal: {
// areaColor: "#00295d", //每块区域的颜色
areaColor: {
image: mapBg, //每块区域使用图片做背景
repeat: "no-repeat",
},
borderColor: "#57FFFD",
borderWidth: this.fontSize(0.03),
},
emphasis: {
// 点击高亮显示设置
areaColor: "#2ab8ff",
shadowColor: "#4ba4f2",
shadowBlur: this.fontSize(0.2),
borderWidth: this.fontSize(0.02),
borderColor: "#3B5077",
borderWidth: this.fontSize(0.03),
},
},
label: {
// 地图上街道名字显示设置
normal: {
show: true,
textStyle: {
color: "#57FFFD",
fontSize: this.fontSize(0.18),
},
},
emphasis: {
textStyle: {
color: "#fff",
},
},
},
},
{
// 改对象是地图上的点(政府的点)
name: "",
type: "scatter",
coordinateSystem: "geo",
data: this.scatterData,
symbol: star, // 改点使用五角星标注
symbolSize: this.fontSize(0.4),
label: {
// 设置点标注字体的样式
normal: {
formatter: function (p) {
return "{a|" + p.data.name + "}"; //这里的a与下方rich里定义的名字对应
},
position: "bottom",
color: "#fff",
show: true,
rich: {
a: {
borderRadius: 5,
color: "#4FF08E",
fontSize: this.fontSize(0.16),
backgroundColor: "rgba(0,0,0,0.6)",
shadowColor: "#4FF08E",
// shadowOffsetX: -6,
// shadowOffsetY: -10,
shadowBlur: this.fontSize(0.1),
textAlign: "center",
padding: [
this.fontSize(0.05),
this.fontSize(0.08),
this.fontSize(0.1),
this.fontSize(0.08),
],
},
},
},
emphasis: {
show: true,
},
},
},
{
// 改对象是地图上的点除了政府其他的点
name: "",
type: "effectScatter", //采用水波纹点
coordinateSystem: "geo",
data: this.scatterData1,
color: "yellow",
symbolSize: this.fontSize(0.1),
rippleEffect: {
number: 3, // 波纹的数量
scale: 5, // 波纹的最大缩放比例
},
label: {
normal: {
formatter: function (p) {
return "{a|" + p.data.name + "}";
},
position: "bottom",
color: "#fff",
show: true,
rich: {
a: {
borderRadius: 5,
color: "#57FFFD",
fontSize: this.fontSize(0.16),
backgroundColor: "rgba(0,0,0,0.6)",
shadowColor: "#02F5F2",
// shadowOffsetX: -6,
// shadowOffsetY: -10,
shadowBlur: this.fontSize(0.1),
textAlign: "center",
padding: [
this.fontSize(0.05),
this.fontSize(0.08),
this.fontSize(0.1),
this.fontSize(0.08),
],
},
},
},
emphasis: {
show: true,
},
},
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
@import "./css/rem.scss";
</style>