效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8bd71a15866072fb9aa457305f1d2cb5.png)
<template>
<div class="map">
<div ref="char" style="width: 100%; height: 100%"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue"; //watch
import "../../assets/map";
import { indu as indus } from "@/store/industry";
const char = ref(null);
const indu = indus();
const initCharts = () => {
const charts = echarts.init(char.value);
const option = {
// 背景颜色
backgroundColor: "rgba(255,255,255,0)",
// 提示浮窗样式
tooltip: {
show: true,
trigger: "item",
alwaysShowContent: false,
backgroundColor: "rgba(255,255,255,0.9)",
borderColor: "rgba(0, 0, 0, 0.16);",
hideDelay: 100,
triggerOn: "mousemove",
enterable: true,
textStyle: {
color: "#333",
fontSize: "12",
width: 20,
height: 30,
overflow: "break",
},
showDelay: 100,
},
series: [
{
type: "map",
map: "xiaoshan",
layoutCenter: ["50%", "48%"],
label: {
// 通常状态下的样式
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "#fff",
},
},
},
zoom: 1.2,
// 地图区域的样式设置
itemStyle: {
normal: {
borderColor: "#fff",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.1,
y: 0.1,
r: 0.1,
colorStops: [
{
offset: 0,
color: "rgba(4, 80, 183, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "#226bfc", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "#1F5E97",
shadowOffsetX: 4,
shadowOffsetY: 5,
shadowBlur: 2,
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: "#03ccfe",
borderWidth: 0,
},
},
// 单选 点击高亮
selectedModeL: "single",
select: {
label: {
show: true,
color: "#fff",
},
itemStyle: {
areaColor: "#03ccfe",
},
},
},
],
};
// 地图注册,第一个参数的名字必须和option.geo.map一致
charts.setOption(option);
window.addEventListener("resize", () => {
charts.resize();
});
charts.on("click", function (el) {
console.log(el);
indu.townlist.forEach((al) => {
if (al.label == el.name) {
indu.town = al.label;
indu.towns = al.value;
}
});
});
};
// 监听清空村社选择框 取消地图选中
// watch(
// () => [indu.town],
// () => {
// if (indu.town == "" || indu.town == null) {
// aaa.dispatchAction({
// type: "unselect",
// });
// console.log(aaa);
// }
// }
// );
onMounted(() => {
initCharts();
});
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 100%;
}
</style>
map.js 地图 json数据
(function (root, factory) {
console.log("root", root);
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["exports", "echarts"], factory);
} else if (
typeof exports === "object" &&
typeof exports.nodeName !== "string"
) {
// CommonJS
factory(exports, require("echarts"));
} else {
// Browser globals
factory({}, window.echarts);
}
})(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== "undefined") {
console && console.error && console.error(msg);
}
};
if (!echarts) {
log("ECharts is not Loaded");
return;
}
if (!echarts.registerMap) {
log("ECharts Map is not loaded");
return;
}
echarts.registerMap("xiaoshan", {
type: "FeatureCollection",
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:OGC:1.3:CRS84",
},
}, features: [
// ************************************这里配置地图数据 **************************************
{
geometry: {
coordinates: [
[
[
[120.4037364520001, 30.13978430300005],
[120.404045781, 30.13971886800005],
[120.4043432140001, 30.13973076500006],
[120.404575212, 30.13976050900003],
[120.4046882360001, 30.13810083500002],
[120.4010778080001, 30.13783238100011],
[120.4010173300001, 30.13857746100003],
[120.4009262300001, 30.13878845700008],
[120.4006624040001, 30.13907169700006],
[120.4003387600001, 30.13934358100009],
[120.400126846, 30.13943017700006],
[120.401040522, 30.14030025000002],
[120.4015782800001, 30.14018127700003],
[120.4021969400001, 30.14002899100004],
[120.4029726450001, 30.139957607],
[120.403415224, 30.13989574100003],
[120.4037364520001, 30.13978430300005],
],
],
[
[
[120.407829739, 30.16549231700004],
[120.407597742, 30.16408843500006],
[120.4072319000001, 30.1641865880001],
[120.4070861580001, 30.16387130900003],
[120.40716349, 30.16353818500009],
[120.4071248240001, 30.16313070200004],
[120.407062363, 30.16242876100005],
[120.40636683, 30.16241368800004],
[120.4064807630001, 30.16321743300002],
[120.4064807630001, 30.16384561100004],
[120.406445071, 30.16443095900007],
[120.4063986710001, 30.1648521230001],
[120.4062808890001, 30.165191196],
[120.40614169, 30.165433901],
[120.4058704320001, 30.16570159100004],
[120.406041753, 30.16591931100002],
[120.4063237190001, 30.16614060100003],
[120.4064736250002, 30.16626552300007],
[120.406479909, 30.1662756150001],
[120.4066281110001, 30.16624184700006],
[120.4068065710001, 30.16615261800005],
[120.407035594, 30.16595928600004],
[120.4071664640001, 30.16584923600009],
[120.4073627700001, 30.16560831600005],
[120.407829739, 30.16549231700004],
],
],
[
[
[120.404382971, 30.16346727700009],
[120.4039261140001, 30.16346727700009],
[120.403874016, 30.16464516300002],
[120.404340141, 30.16466414600009],
[120.404382971, 30.16346727700009],
],
],
],
type: "MultiPolygon",
},
properties: {
UserID: 0,
XZQHBM: "330109108001",
ZZYWID_CS: "",
area: 130398,
cunshe: "毕公桥社区",
length: null,
quxian: "萧山区",
zhenjie: "衙前镇",
name: "毕公桥社区",
},
type: "Feature",
},
],
});
});
main.ts 全局配置
window.echarts = echarts;