|
|
@@ -0,0 +1,1020 @@
|
|
|
+<template>
|
|
|
+ <div class="main-map-data data-province">
|
|
|
+ <div
|
|
|
+ ref="map"
|
|
|
+ :class="className"
|
|
|
+ class="map"
|
|
|
+ :style="{ height: height, width: width }"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ id="mapBackground"
|
|
|
+ src="@/assets/images/main/map_bg.jpg"
|
|
|
+ alt=""
|
|
|
+ style="display: none"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import echarts from "echarts";
|
|
|
+ import "echarts-gl";
|
|
|
+ require("echarts/theme/macarons"); // echarts theme
|
|
|
+ import resize from "../../../components/Echarts/mixins/resize";
|
|
|
+ import 山西省 from "./山西省.json";
|
|
|
+ import 大同市 from "./大同市.json";
|
|
|
+ import 朔州市 from "./朔州市.json";
|
|
|
+ import 忻州市 from "./忻州市.json";
|
|
|
+ import 吕梁市 from "./吕梁市.json";
|
|
|
+ import 太原市 from "./太原市.json";
|
|
|
+ import 阳泉市 from "./阳泉市.json";
|
|
|
+ import 晋中市 from "./晋中市.json";
|
|
|
+ import 临汾市 from "./临汾市.json";
|
|
|
+ import 长治市 from "./长治市.json";
|
|
|
+ import 运城市 from "./运城市.json";
|
|
|
+ import 晋城市 from "./晋城市.json";
|
|
|
+ // 临汾市
|
|
|
+ import 安泽县 from "./临汾市/安泽县.json";
|
|
|
+ import 大宁县 from "./临汾市/大宁县.json";
|
|
|
+ import 汾西县 from "./临汾市/汾西县.json";
|
|
|
+ import 浮山县 from "./临汾市/浮山县.json";
|
|
|
+ import 古县 from "./临汾市/古县.json";
|
|
|
+ import 洪洞县 from "./临汾市/洪洞县.json";
|
|
|
+ import 侯马市 from "./临汾市/侯马市.json";
|
|
|
+ import 霍州市 from "./临汾市/霍州市.json";
|
|
|
+ import 吉县 from "./临汾市/吉县.json";
|
|
|
+ import 蒲县 from "./临汾市/蒲县.json";
|
|
|
+ import 曲沃县 from "./临汾市/曲沃县.json";
|
|
|
+ import 隰县 from "./临汾市/隰县.json";
|
|
|
+ import 乡宁县 from "./临汾市/乡宁县.json";
|
|
|
+ import 襄汾县 from "./临汾市/襄汾县.json";
|
|
|
+ import 尧都区 from "./临汾市/尧都区.json";
|
|
|
+ import 翼城县 from "./临汾市/翼城县.json";
|
|
|
+ import 永和县 from "./临汾市/永和县.json";
|
|
|
+ // 长治市
|
|
|
+ import 壶关县 from "./长治市/壶关县.json";
|
|
|
+ import 黎城县 from "./长治市/黎城县.json";
|
|
|
+ import 潞城区 from "./长治市/潞城区.json";
|
|
|
+ import 潞州区 from "./长治市/潞州区.json";
|
|
|
+ import 平顺县 from "./长治市/平顺县.json";
|
|
|
+ import 沁县 from "./长治市/沁县.json";
|
|
|
+ import 沁源县 from "./长治市/沁源县.json";
|
|
|
+ import 上党区 from "./长治市/上党区.json";
|
|
|
+ import 屯留区 from "./长治市/屯留区.json";
|
|
|
+ import 武乡县 from "./长治市/武乡县.json";
|
|
|
+ import 襄垣县 from "./长治市/襄垣县.json";
|
|
|
+ import 长子县 from "./长治市/长子县.json";
|
|
|
+ // 运城市
|
|
|
+ import 河津市 from "./运城市/河津市.json";
|
|
|
+ import 稷山县 from "./运城市/稷山县.json";
|
|
|
+ import 绛县 from "./运城市/绛县.json";
|
|
|
+ import 临猗县 from "./运城市/临猗县.json";
|
|
|
+ import 平陆县 from "./运城市/平陆县.json";
|
|
|
+ import 芮城县 from "./运城市/芮城县.json";
|
|
|
+ import 万荣县 from "./运城市/万荣县.json";
|
|
|
+ import 闻喜县 from "./运城市/闻喜县.json";
|
|
|
+ import 夏县 from "./运城市/夏县.json";
|
|
|
+ import 新绛县 from "./运城市/新绛县.json";
|
|
|
+ import 盐湖区 from "./运城市/盐湖区.json";
|
|
|
+ import 永济市 from "./运城市/永济市.json";
|
|
|
+ import 垣曲县 from "./运城市/垣曲县.json";
|
|
|
+ //晋城市
|
|
|
+ import 城区 from "./晋城市/城区.json";
|
|
|
+ import 高平市 from "./晋城市/高平市.json";
|
|
|
+ import 陵川县 from "./晋城市/陵川县.json";
|
|
|
+ import 沁水县 from "./晋城市/沁水县.json";
|
|
|
+ import 阳城县 from "./晋城市/阳城县.json";
|
|
|
+ import 泽州县 from "./晋城市/泽州县.json";
|
|
|
+ //吕梁市
|
|
|
+ import 方山县 from "./吕梁市/方山县.json";
|
|
|
+ import 汾阳市 from "./吕梁市/汾阳市.json";
|
|
|
+ import 交城县 from "./吕梁市/交城县.json";
|
|
|
+ import 交口县 from "./吕梁市/交口县.json";
|
|
|
+ import 岚县 from "./吕梁市/岚县.json";
|
|
|
+ import 离石区 from "./吕梁市/离石区.json";
|
|
|
+ import 临县 from "./吕梁市/临县.json";
|
|
|
+ import 柳林县 from "./吕梁市/柳林县.json";
|
|
|
+ import 娄烦县 from "./吕梁市/娄烦县.json";
|
|
|
+ import 石楼县 from "./吕梁市/石楼县.json";
|
|
|
+ import 文水县 from "./吕梁市/文水县.json";
|
|
|
+ import 孝义市 from "./吕梁市/孝义市.json";
|
|
|
+ import 兴县 from "./吕梁市/兴县.json";
|
|
|
+ import 中阳县 from "./吕梁市/中阳县.json";
|
|
|
+ //太原市
|
|
|
+ import 古交市 from "./太原市/古交市.json";
|
|
|
+ import 尖草坪区 from "./太原市/尖草坪区.json";
|
|
|
+ import 娄烦县2 from "./太原市/娄烦县.json";
|
|
|
+ import 清徐县 from "./太原市/清徐县.json";
|
|
|
+ import 万柏林区 from "./太原市/万柏林区.json";
|
|
|
+ import 小店区 from "./太原市/小店区.json";
|
|
|
+ import 杏花岭区 from "./太原市/杏花岭区.json";
|
|
|
+ import 阳曲县 from "./太原市/阳曲县.json";
|
|
|
+ import 迎泽区 from "./太原市/迎泽区.json";
|
|
|
+ //阳泉市
|
|
|
+ import 城区2 from "./阳泉市/城区.json";
|
|
|
+ import 郊区 from "./阳泉市/郊区.json";
|
|
|
+ import 矿区 from "./阳泉市/矿区.json";
|
|
|
+ import 平定县 from "./阳泉市/平定县.json";
|
|
|
+ import 盂县 from "./阳泉市/盂县.json";
|
|
|
+ //晋中市
|
|
|
+ import 和顺县 from "./晋中市/和顺县.json";
|
|
|
+ import 介休市 from "./晋中市/介休市.json";
|
|
|
+ import 灵石县 from "./晋中市/灵石县.json";
|
|
|
+ import 平遥县 from "./晋中市/平遥县.json";
|
|
|
+ import 祁县 from "./晋中市/祁县.json";
|
|
|
+ import 寿阳县 from "./晋中市/寿阳县.json";
|
|
|
+ import 太谷区 from "./晋中市/太谷区.json";
|
|
|
+ import 昔阳县 from "./晋中市/昔阳县.json";
|
|
|
+ import 榆次区 from "./晋中市/榆次区.json";
|
|
|
+ import 榆社县 from "./晋中市/榆社县.json";
|
|
|
+ import 左权县 from "./晋中市/左权县.json";
|
|
|
+ //大同市
|
|
|
+ import 广灵县 from "./大同市/广灵县.json";
|
|
|
+ import 浑源县 from "./大同市/浑源县.json";
|
|
|
+ import 灵丘县 from "./大同市/灵丘县.json";
|
|
|
+ import 平城区 from "./大同市/平城区.json";
|
|
|
+ import 天镇县 from "./大同市/天镇县.json";
|
|
|
+ import 新荣区 from "./大同市/新荣区.json";
|
|
|
+ import 阳高县 from "./大同市/阳高县.json";
|
|
|
+ import 云冈区 from "./大同市/云冈区.json";
|
|
|
+ import 云州区 from "./大同市/云州区.json";
|
|
|
+ import 左云县 from "./大同市/左云县.json";
|
|
|
+ //朔州市
|
|
|
+ import 怀仁市 from "./朔州市/怀仁市.json";
|
|
|
+ import 平鲁区 from "./朔州市/平鲁区.json";
|
|
|
+ import 山阴县 from "./朔州市/山阴县.json";
|
|
|
+ import 朔城区 from "./朔州市/朔城区.json";
|
|
|
+ import 应县 from "./朔州市/应县.json";
|
|
|
+ import 右玉县 from "./朔州市/右玉县.json";
|
|
|
+ //忻州市
|
|
|
+ import 保德县 from "./忻州市/保德县.json";
|
|
|
+ import 代县 from "./忻州市/代县.json";
|
|
|
+ import 定襄县 from "./忻州市/定襄县.json";
|
|
|
+ import 繁峙县 from "./忻州市/繁峙县.json";
|
|
|
+ import 河曲县 from "./忻州市/河曲县.json";
|
|
|
+ import 静乐县 from "./忻州市/静乐县.json";
|
|
|
+ import 岢岚县 from "./忻州市/岢岚县.json";
|
|
|
+ import 宁武县 from "./忻州市/宁武县.json";
|
|
|
+ import 偏关县 from "./忻州市/偏关县.json";
|
|
|
+ import 神池县 from "./忻州市/神池县.json";
|
|
|
+ import 五台县 from "./忻州市/五台县.json";
|
|
|
+ import 五寨县 from "./忻州市/五寨县.json";
|
|
|
+ import 忻府区 from "./忻州市/忻府区.json";
|
|
|
+ import 原平市 from "./忻州市/原平市.json";
|
|
|
+
|
|
|
+ // 引入json数据
|
|
|
+ import company from "../data/company.json";
|
|
|
+
|
|
|
+ var imgElement;
|
|
|
+
|
|
|
+ export default {
|
|
|
+ mixins: [resize],
|
|
|
+ name: "Province",
|
|
|
+ props: {
|
|
|
+ className: {
|
|
|
+ type: String,
|
|
|
+ default: "chart",
|
|
|
+ },
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: "100%",
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: "950px",
|
|
|
+ },
|
|
|
+ autoResize: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ top: {
|
|
|
+ type: Number,
|
|
|
+ default: 50,
|
|
|
+ },
|
|
|
+ bottom: {
|
|
|
+ type: Number,
|
|
|
+ default: 100,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ poiName: "", //当前选择的点
|
|
|
+ showEchart: false,
|
|
|
+ showLocal: false,
|
|
|
+ chart: null,
|
|
|
+ province: "山西省",
|
|
|
+ city: "",
|
|
|
+ area: "",
|
|
|
+ region: 山西省,
|
|
|
+ deep: 1,
|
|
|
+ dataSource: {
|
|
|
+ 大同市: 大同市,
|
|
|
+ 朔州市: 朔州市,
|
|
|
+ 忻州市: 忻州市,
|
|
|
+ 吕梁市: 吕梁市,
|
|
|
+ 太原市: 太原市,
|
|
|
+ 阳泉市: 阳泉市,
|
|
|
+ 晋中市: 晋中市,
|
|
|
+ 临汾市: 临汾市,
|
|
|
+ 长治市: 长治市,
|
|
|
+ 运城市: 运城市,
|
|
|
+ 晋城市: 晋城市,
|
|
|
+
|
|
|
+ 安泽县: 安泽县,
|
|
|
+ 大宁县: 大宁县,
|
|
|
+ 汾西县: 汾西县,
|
|
|
+ 浮山县: 浮山县,
|
|
|
+ 古县: 古县,
|
|
|
+ 洪洞县: 洪洞县,
|
|
|
+ 侯马市: 侯马市,
|
|
|
+ 霍州市: 霍州市,
|
|
|
+ 吉县: 吉县,
|
|
|
+ 蒲县: 蒲县,
|
|
|
+ 曲沃县: 曲沃县,
|
|
|
+ 隰县: 隰县,
|
|
|
+ 乡宁县: 乡宁县,
|
|
|
+ 襄汾县: 襄汾县,
|
|
|
+ 尧都区: 尧都区,
|
|
|
+ 翼城县: 翼城县,
|
|
|
+ 永和县: 永和县,
|
|
|
+
|
|
|
+ 壶关县: 壶关县,
|
|
|
+ 黎城县: 黎城县,
|
|
|
+ 潞城区: 潞城区,
|
|
|
+ 潞州区: 潞州区,
|
|
|
+ 平顺县: 平顺县,
|
|
|
+ 沁县: 沁县,
|
|
|
+ 沁源县: 沁源县,
|
|
|
+ 上党区: 上党区,
|
|
|
+ 屯留区: 屯留区,
|
|
|
+ 武乡县: 武乡县,
|
|
|
+ 襄垣县: 襄垣县,
|
|
|
+ 长子县: 长子县,
|
|
|
+
|
|
|
+ 河津市: 河津市,
|
|
|
+ 稷山县: 稷山县,
|
|
|
+ 绛县: 绛县,
|
|
|
+ 临猗县: 临猗县,
|
|
|
+ 平陆县: 平陆县,
|
|
|
+ 芮城县: 芮城县,
|
|
|
+ 万荣县: 万荣县,
|
|
|
+ 闻喜县: 闻喜县,
|
|
|
+ 夏县: 夏县,
|
|
|
+ 新绛县: 新绛县,
|
|
|
+ 盐湖区: 盐湖区,
|
|
|
+ 永济市: 永济市,
|
|
|
+ 垣曲县: 垣曲县,
|
|
|
+
|
|
|
+ 城区: 城区,
|
|
|
+ 高平市: 高平市,
|
|
|
+ 陵川县: 陵川县,
|
|
|
+ 沁水县: 沁水县,
|
|
|
+ 阳城县: 阳城县,
|
|
|
+ 泽州县: 泽州县,
|
|
|
+
|
|
|
+ 方山县: 方山县,
|
|
|
+ 汾阳市: 汾阳市,
|
|
|
+ 交城县: 交城县,
|
|
|
+ 交口县: 交口县,
|
|
|
+ 岚县: 岚县,
|
|
|
+ 离石区: 离石区,
|
|
|
+ 临县: 临县,
|
|
|
+ 柳林县: 柳林县,
|
|
|
+ 娄烦县: 娄烦县,
|
|
|
+ 石楼县: 石楼县,
|
|
|
+ 文水县: 文水县,
|
|
|
+ 孝义市: 孝义市,
|
|
|
+ 兴县: 兴县,
|
|
|
+ 中阳县: 中阳县,
|
|
|
+
|
|
|
+ 古交市: 古交市,
|
|
|
+ 尖草坪区: 尖草坪区,
|
|
|
+ 娄烦县2: 娄烦县2,
|
|
|
+ 清徐县: 清徐县,
|
|
|
+ 万柏林区: 万柏林区,
|
|
|
+ 小店区: 小店区,
|
|
|
+ 杏花岭区: 杏花岭区,
|
|
|
+ 阳曲县: 阳曲县,
|
|
|
+ 迎泽区: 迎泽区,
|
|
|
+
|
|
|
+ 城区: 城区2,
|
|
|
+ 郊区: 郊区,
|
|
|
+ 矿区: 矿区,
|
|
|
+ 平定县: 平定县,
|
|
|
+ 盂县: 盂县,
|
|
|
+
|
|
|
+ 和顺县: 和顺县,
|
|
|
+ 介休市: 介休市,
|
|
|
+ 灵石县: 灵石县,
|
|
|
+ 平遥县: 平遥县,
|
|
|
+ 祁县: 祁县,
|
|
|
+ 寿阳县: 寿阳县,
|
|
|
+ 太谷区: 太谷区,
|
|
|
+ 昔阳县: 昔阳县,
|
|
|
+ 榆次区: 榆次区,
|
|
|
+ 榆社县: 榆社县,
|
|
|
+ 左权县: 左权县,
|
|
|
+
|
|
|
+ 广灵县: 广灵县,
|
|
|
+ 浑源县: 浑源县,
|
|
|
+ 灵丘县: 灵丘县,
|
|
|
+ 平城区: 平城区,
|
|
|
+ 天镇县: 天镇县,
|
|
|
+ 新荣区: 新荣区,
|
|
|
+ 阳高县: 阳高县,
|
|
|
+ 云冈区: 云冈区,
|
|
|
+ 云州区: 云州区,
|
|
|
+ 左云县: 左云县,
|
|
|
+
|
|
|
+ 怀仁市: 怀仁市,
|
|
|
+ 平鲁区: 平鲁区,
|
|
|
+ 山阴县: 山阴县,
|
|
|
+ 朔城区: 朔城区,
|
|
|
+ 应县: 应县,
|
|
|
+ 右玉县: 右玉县,
|
|
|
+
|
|
|
+ 保德县: 保德县,
|
|
|
+ 代县: 代县,
|
|
|
+ 定襄县: 定襄县,
|
|
|
+ 繁峙县: 繁峙县,
|
|
|
+ 河曲县: 河曲县,
|
|
|
+ 静乐县: 静乐县,
|
|
|
+ 岢岚县: 岢岚县,
|
|
|
+ 宁武县: 宁武县,
|
|
|
+ 偏关县: 偏关县,
|
|
|
+ 神池县: 神池县,
|
|
|
+ 五台县: 五台县,
|
|
|
+ 五寨县: 五寨县,
|
|
|
+ 忻府区: 忻府区,
|
|
|
+ 原平市: 原平市,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ destroyed() {},
|
|
|
+ beforeDestroy() {},
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ imgElement = document.getElementById("mapBackground");
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initChart();
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initChart(name = "") {
|
|
|
+
|
|
|
+ echarts.registerMap("shanxi", this.region);
|
|
|
+ this.chart = echarts.init(this.$refs.map, "macarons");
|
|
|
+ if (name) {
|
|
|
+ name = name.slice(0, -1);
|
|
|
+ }
|
|
|
+ let poiName = this.poiName;
|
|
|
+ let poiInfo = {};
|
|
|
+ //处理省地图
|
|
|
+ let markers = [];
|
|
|
+ let lines = [];
|
|
|
+ company.forEach((item) => {
|
|
|
+ item.children.forEach((childs) => {
|
|
|
+ if (name) {
|
|
|
+ //只渲染本市的
|
|
|
+ if (childs.children && childs.children.length > 0) {
|
|
|
+ if (childs.label.indexOf(name) != -1) {
|
|
|
+ childs.children.forEach((child) => {
|
|
|
+ let symbol =
|
|
|
+ "image://" + require("@/assets/images/main/map/xian.png");
|
|
|
+ let symbolSize = [10, 10];
|
|
|
+ if (child.label != poiName) {
|
|
|
+ if (this.deep < 3) {
|
|
|
+ if (child.value.length == 5 && child.city != "临汾市" && child.city != "运城市") {
|
|
|
+ //市级单位
|
|
|
+ symbol =
|
|
|
+ "image://" +
|
|
|
+ require("@/assets/images/main/map/shi.png");
|
|
|
+ } else if (
|
|
|
+ child.city == "临汾市" ||
|
|
|
+ child.city == "运城市"
|
|
|
+ ) {
|
|
|
+ //不点亮
|
|
|
+ symbol =
|
|
|
+ "image://" +
|
|
|
+ require("@/assets/images/main/map/none.png");
|
|
|
+ symbolSize = [10, 10];
|
|
|
+ }
|
|
|
+ markers.push({
|
|
|
+ name: child.label,
|
|
|
+ coord: child.poi,
|
|
|
+ symbol: symbol,
|
|
|
+ symbolSize: symbolSize,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // symbol =
|
|
|
+ // "image://" +
|
|
|
+ // require("@/assets/images/main/map/choosed.png");
|
|
|
+ symbolSize = [20, 20];
|
|
|
+ if (child.city == "临汾市" || child.city == "运城市") {
|
|
|
+ //不点亮
|
|
|
+ symbol =
|
|
|
+ "image://" +
|
|
|
+ require("@/assets/images/main/map/none.png");
|
|
|
+ symbolSize = [20, 20];
|
|
|
+ }
|
|
|
+ if (child.value.length == 5 && (child.city != "临汾市" && child.city != "运城市")) {
|
|
|
+ //市级单位
|
|
|
+ symbol =
|
|
|
+ "image://" +
|
|
|
+ require("@/assets/images/main/map/shi.png");
|
|
|
+ }
|
|
|
+ markers.push({
|
|
|
+ name: child.label,
|
|
|
+ coord: child.poi,
|
|
|
+ symbol: symbol,
|
|
|
+ symbolSize: symbolSize,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (this.deep == 3) {
|
|
|
+ let symbol =
|
|
|
+ "image://" + require("@/assets/images/main/map/xian.png");
|
|
|
+ let symbolSize = [10,10];
|
|
|
+ childs.children.forEach((child) => {
|
|
|
+ // if (child.label == poiName) {
|
|
|
+ // symbol =
|
|
|
+ // "image://" +
|
|
|
+ // require("@/assets/images/main/map/choosed.png");
|
|
|
+ // symbolSize = [50, 50];
|
|
|
+ // }
|
|
|
+ if (child.label.indexOf(name) != -1) {
|
|
|
+ markers.push({
|
|
|
+ name: child.label,
|
|
|
+ coord: child.poi,
|
|
|
+ symbol: symbol,
|
|
|
+ symbolSize: symbolSize,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //手动处理单位
|
|
|
+ let symbol2 =
|
|
|
+ "image://" + require("@/assets/images/main/map/shi.png");
|
|
|
+ let symbolSize2 = [10,10];
|
|
|
+ if(name == '离石'){
|
|
|
+ markers.push({
|
|
|
+ name: "国网吕梁供电公司",
|
|
|
+ coord: [111.152032, 37.516873],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: symbolSize2,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }else if(name == '平城'){
|
|
|
+ markers.push({
|
|
|
+ name: "国网大同供电公司",
|
|
|
+ coord: [113.293305, 40.07701],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: symbolSize2,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }else if(name == '朔城'){
|
|
|
+ markers.push({
|
|
|
+ name: "国网朔州供电公司",
|
|
|
+ coord: [112.428691, 39.326848],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: symbolSize2,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ markers.push({
|
|
|
+ name: "神头供电公司",
|
|
|
+ coord: [112.489562, 39.342887],
|
|
|
+ symbol: symbol,
|
|
|
+ symbolSize: symbolSize,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }else if(name == '忻府'){
|
|
|
+ markers.push({
|
|
|
+ name: "国网忻州供电公司",
|
|
|
+ coord: [112.732551, 38.455998],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: symbolSize2,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }else if(name == '榆次'){
|
|
|
+ markers.push({
|
|
|
+ name: "国网晋中供电公司",
|
|
|
+ coord: [112.751429, 37.699199],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: symbolSize2,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }else if(name == '沁'){
|
|
|
+ markers.push({
|
|
|
+ name: "国网长治供电公司",
|
|
|
+ coord: [112.768247, 36.82958],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: symbolSize2,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }else if(name == '洪洞'){
|
|
|
+ markers.push({
|
|
|
+ name: "国网临汾供电公司",
|
|
|
+ coord: [111.502956, 36.098799],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: symbolSize2,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }else if(name == '尧都'){
|
|
|
+ markers.push({
|
|
|
+ name: "国网临汾供电公司",
|
|
|
+ coord: [111.536574, 36.079109],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: [20, 20],
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }else if(name == '盐湖'){
|
|
|
+ markers.push({
|
|
|
+ name: "运城市公司(本部)",
|
|
|
+ coord: [110.952935, 35.136313],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: [20, 20],
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }else if(name == '沁水'){
|
|
|
+ markers.push({
|
|
|
+ name: "国网晋城供电公司",
|
|
|
+ coord: [112.266473, 35.683795],
|
|
|
+ symbol: symbol2,
|
|
|
+ symbolSize: [20, 20],
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{//直属单位
|
|
|
+ if (childs.city.indexOf(name) != -1) {
|
|
|
+ let symbol =
|
|
|
+ "image://" + require("@/assets/images/main/map/zhishu.png");
|
|
|
+ let symbolSize = [10,10];
|
|
|
+ if (poiName && childs.label == poiName) {
|
|
|
+ // symbol =
|
|
|
+ // "image://" +
|
|
|
+ // require("@/assets/images/main/map/choosed.png");
|
|
|
+ symbolSize = [20, 20];
|
|
|
+ }
|
|
|
+ markers.push({
|
|
|
+ name: childs.label,
|
|
|
+ coord: childs.poi,
|
|
|
+ symbol: symbol,
|
|
|
+ symbolSize,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ //渲染全部
|
|
|
+ if (childs.children && childs.children.length > 0) {
|
|
|
+ //地市级
|
|
|
+ childs.children.forEach((child) => {
|
|
|
+ let symbol =
|
|
|
+ "image://" + require("@/assets/images/main/map/xian.png");
|
|
|
+ let symbolSize = [10,10];
|
|
|
+ if (child.label != poiName) {
|
|
|
+ if (child.value.length == 5) {
|
|
|
+ if (child.city == "临汾市" || child.city == "运城市") {
|
|
|
+ //不点亮
|
|
|
+ symbol =
|
|
|
+ "image://" +
|
|
|
+ require("@/assets/images/main/map/none.png");
|
|
|
+ symbolSize = [10, 10];
|
|
|
+ } else {
|
|
|
+ //市级单位
|
|
|
+ symbol =
|
|
|
+ "image://" +
|
|
|
+ require("@/assets/images/main/map/shi.png");
|
|
|
+ lines.push({
|
|
|
+ coords: [
|
|
|
+ child.poi,
|
|
|
+ [112.316448, 38.000045]
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else if (child.city == "临汾市" || child.city == "运城市") {
|
|
|
+ //不点亮
|
|
|
+ symbol =
|
|
|
+ "image://" + require("@/assets/images/main/map/none.png");
|
|
|
+ symbolSize = [10, 10];
|
|
|
+ }else{
|
|
|
+ // lines.push({
|
|
|
+ // coords: [
|
|
|
+ // child.poi,
|
|
|
+ // [112.316448, 38.000045]
|
|
|
+ // ]
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // symbol =
|
|
|
+ // "image://" +
|
|
|
+ // require("@/assets/images/main/map/choosed.png");
|
|
|
+ symbolSize = [20, 20];
|
|
|
+ }
|
|
|
+ markers.push({
|
|
|
+ name: child.label,
|
|
|
+ coord: child.poi,
|
|
|
+ symbol: symbol,
|
|
|
+ symbolSize,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ //省公司 直属单位
|
|
|
+ let symbol =
|
|
|
+ "image://" + require("@/assets/images/main/map/shi.png");
|
|
|
+ let symbolSize = [10,10];
|
|
|
+ if (childs.value == "10001") {
|
|
|
+ //省公司
|
|
|
+ symbol = "image://" + require("@/assets/images/build_icon.png");
|
|
|
+ symbolSize = [0,0];
|
|
|
+ } else if (childs.value == "1A001" || childs.value == "1A002") {
|
|
|
+ //直属单位
|
|
|
+ symbol =
|
|
|
+ "image://" + require("@/assets/images/main/map/zhishu.png");
|
|
|
+ lines.push({
|
|
|
+ coords: [
|
|
|
+ childs.poi,
|
|
|
+ [112.316448, 38.000045]
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ }else if (childs.value == "") {
|
|
|
+ //直属单位
|
|
|
+ symbol =
|
|
|
+ "image://" + require("@/assets/images/main/map/zhishu.png");
|
|
|
+ }
|
|
|
+ if (childs.label == poiName) {
|
|
|
+ // symbol =
|
|
|
+ // "image://" + require("@/assets/images/main/map/choosed.png");
|
|
|
+ symbolSize = [20, 20];
|
|
|
+ }
|
|
|
+ markers.push({
|
|
|
+ name: childs.label,
|
|
|
+ coord: childs.poi,
|
|
|
+ symbol: symbol,
|
|
|
+ symbolSize,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ //处理太原市 添加太原市图标
|
|
|
+ if (name && name.indexOf("太原") != "-1") {
|
|
|
+ let symbol = "image://" + require("@/assets/images/build_icon.png");
|
|
|
+ let symbolSize = [50,60];
|
|
|
+ markers.push({
|
|
|
+ name: "山西省公司(本部)",
|
|
|
+ coord: [112.316448, 38.000045],
|
|
|
+ symbol: symbol,
|
|
|
+ symbolSize,
|
|
|
+ level: 20 // 设置 level 值
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // console.log(markers,'==========');
|
|
|
+ this.setOptions(markers, name, poiInfo,lines);
|
|
|
+ },
|
|
|
+
|
|
|
+ setOptions(markers, name, poiInfo,lines) {
|
|
|
+ this.chart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{b}"
|
|
|
+ },
|
|
|
+ geo: {
|
|
|
+ map: "shanxi",
|
|
|
+ zoom: 1.1, // 这里设置了初始缩放级别为1.2，可以根据需要调整
|
|
|
+ // top: this.$props.top, // 可以是数值或者百分比
|
|
|
+ // bottom:this.$props.bottom,
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#11F6F2", // 外轮廓描边颜色
|
|
|
+ borderWidth: 5, // 外轮廓描边宽度
|
|
|
+ // 阴影
|
|
|
+ shadowColor: "#0E7683", // 阴影颜色
|
|
|
+ shadowBlur: 0, // 阴影模糊度
|
|
|
+ shadowOffsetX: 5, // 阴影水平偏移
|
|
|
+ shadowOffsetY: 13, // 阴影垂直偏移
|
|
|
+ },
|
|
|
+ layoutCenter: ["50%", "50%"], // 设置地图中心点，百分比为相对于容器的位置
|
|
|
+ // layoutSize: {
|
|
|
+ // // 设置地图大小
|
|
|
+ // width: 600,
|
|
|
+ // height: 600,
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "map",
|
|
|
+ zoom: 1.1, // 这里设置了初始缩放级别为1.2，可以根据需要调整
|
|
|
+ // top: this.$props.top, // 可以是数值或者百分比
|
|
|
+ // bottom:this.$props.bottom,
|
|
|
+ map: "shanxi",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: {
|
|
|
+ image: imgElement,
|
|
|
+ repeat: "no-repeat",
|
|
|
+ }, // 使用图片作为背景颜色,
|
|
|
+ borderColor: "#11F4F0",
|
|
|
+ borderWidth: 1,
|
|
|
+ color: "#333",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: "#0D7481",
|
|
|
+ borderWidth: 0,
|
|
|
+ color: "#fff",
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff' // 高亮状态下文字颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: "#FFF",
|
|
|
+ fontSize:16,
|
|
|
+ fontWeight:600
|
|
|
+ },
|
|
|
+ markPoint: {
|
|
|
+ data: markers,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ coordinateSystem: "geo",
|
|
|
+ zlevel: 10,
|
|
|
+ rippleEffect: {
|
|
|
+ period: 4,
|
|
|
+ brushType: "stroke",
|
|
|
+ scale: 4,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ symbol: this.deep <= 1
|
|
|
+ ? "image://" + require("@/assets/images/build_icon.png")
|
|
|
+ : "",
|
|
|
+ symbolSize: this.deep <= 1 ? 40 : 0,
|
|
|
+ //点的名称和经纬度
|
|
|
+ data: [{ name: "山西省公司(本部)", value: [112.316448, 38.000045] }],
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // type: "effectScatter",
|
|
|
+ // coordinateSystem: "geo",
|
|
|
+ // data: province,
|
|
|
+ // symbolSize: 10,
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // formatter: "{b}",
|
|
|
+ // position: "right",
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: true
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: "#ddb926"
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: "lines",
|
|
|
+ // coordinateSystem: "geo",
|
|
|
+ // zlevel:1,
|
|
|
+ // // polyline: true,
|
|
|
+ // data: lines,
|
|
|
+ // // 线样式
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#11F4F0',
|
|
|
+ // normal: {
|
|
|
+ // show: true,
|
|
|
+ // width: 2, //尾迹线条宽度
|
|
|
+ // opacity: 0.1, //尾迹线条透明度
|
|
|
+ // curveness: -0.3, //尾迹线条曲直度
|
|
|
+ // color: "#4CFF8D", // 飞线颜色
|
|
|
+ // },
|
|
|
+ // // width: 2,
|
|
|
+ // // color: '#11F4F0',
|
|
|
+ // },
|
|
|
+ // // 箭头样式
|
|
|
+ // symbol: ['none', 'none'],
|
|
|
+ // // 线两端的标记样式
|
|
|
+ // symbolSize: 5,
|
|
|
+ // // 线两端的标记样式
|
|
|
+ // effect: {
|
|
|
+ // show: true,
|
|
|
+ // period: 2,
|
|
|
+ // trailLength: 0.1,
|
|
|
+ // symbol: "pin",
|
|
|
+ // color: "#4CFF8D",
|
|
|
+ // symbolSize: 12
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ });
|
|
|
+
|
|
|
+ //监听地图点击事件
|
|
|
+ this.chart.off("click");
|
|
|
+ this.chart.on("click", (e) => {
|
|
|
+ this.handleClick(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //监听地图点击事件
|
|
|
+ handleClick(e) {
|
|
|
+ if(e.componentSubType == 'lines'){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (e.componentType == "markPoint" || e.componentSubType == "scatter") {
|
|
|
+ //点击图标
|
|
|
+ if (e.name == "山西省公司(本部)") {
|
|
|
+ this.$emit("mapClick", {
|
|
|
+ name: e.name,
|
|
|
+ deep: 2,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (this.deep == 1) {
|
|
|
+ this.deep++;
|
|
|
+ }
|
|
|
+ // if(this.deep <= 2){
|
|
|
+ // this.deep = 2;
|
|
|
+ // }
|
|
|
+ //根据点击的姓名 获取当前的省市区
|
|
|
+ this.handleMarkerClick(e);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ //点击地图
|
|
|
+ this.deep++;
|
|
|
+ if (this.deep >= 3) {
|
|
|
+ this.deep = 3;
|
|
|
+ }
|
|
|
+ let name = e.name;
|
|
|
+ if (this.deep == 2) {
|
|
|
+ this.city = name;
|
|
|
+ }
|
|
|
+ if(this.deep > 1){
|
|
|
+ this.$props.top = 100;
|
|
|
+ this.$props.bottom = 100;
|
|
|
+ }
|
|
|
+ this.region = this.dataSource[name];
|
|
|
+ //重新加载地图
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initChart(name);
|
|
|
+ this.$emit("mapClick", {
|
|
|
+ name: name,
|
|
|
+ deep: this.deep,
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //处理点击marker问题
|
|
|
+ handleMarkerClick(e) {
|
|
|
+ let poiName = e.name;
|
|
|
+ let cityName = "";
|
|
|
+ let cityValue = "";
|
|
|
+ let cityValues = "";
|
|
|
+ company.forEach((item) => {
|
|
|
+ item.children.forEach((childs) => {
|
|
|
+ //渲染全部
|
|
|
+ if (childs.children && childs.children.length > 0) {
|
|
|
+ childs.children.forEach((child, index) => {
|
|
|
+ if (child.label == poiName) {
|
|
|
+ cityName = child.city;
|
|
|
+ cityValue = child.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (childs.label == poiName) {
|
|
|
+ cityName = childs.city;
|
|
|
+ cityValue = childs.value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ this.poiName = poiName;
|
|
|
+ //根据childValue 设置默认城市
|
|
|
+ if (cityValue.length > 5) {
|
|
|
+ cityValues = ["10001", cityValue.slice(0, 5), cityValue];
|
|
|
+ } else if(cityValue == '1A001' || cityValue == '1A002' || cityValue == '1A004' || cityValue == '1A005'){
|
|
|
+ cityValues = ["10001", cityValue];
|
|
|
+ }else{
|
|
|
+ cityValues = ["10001", cityValue,cityValue];
|
|
|
+ }
|
|
|
+
|
|
|
+ this.city = cityName;
|
|
|
+ //地级市不处理地图渲染
|
|
|
+ if (this.deep < 3) {
|
|
|
+ this.region = this.dataSource[cityName];
|
|
|
+ }
|
|
|
+ //重新加载地图
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initChart(cityName);
|
|
|
+ this.$emit("mapClick", {
|
|
|
+ name: cityName,
|
|
|
+ deep: this.deep,
|
|
|
+ curCompany: cityValues,
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+
|
|
|
+ //返回重置
|
|
|
+ reloadMap(curDeep) {
|
|
|
+ this.poiName = "";
|
|
|
+ this.poiInfo = {};
|
|
|
+ this.deep = curDeep;
|
|
|
+ if (curDeep <= 1) {
|
|
|
+ this.city = "";
|
|
|
+ this.region = 山西省;
|
|
|
+ this.initChart();
|
|
|
+ } else {
|
|
|
+ this.region = this.dataSource[this.city];
|
|
|
+ this.initChart(this.city);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //父组件调用子组件
|
|
|
+ chooseUnit(e) {
|
|
|
+ let value = "";
|
|
|
+ if (e.length == 3) {
|
|
|
+ value = e[2];
|
|
|
+ } else {
|
|
|
+ value = e[1];
|
|
|
+ }
|
|
|
+ let cityName = "";
|
|
|
+ let poiName = "";
|
|
|
+ let poiInfo = "";
|
|
|
+ //根据公司查询当前的城市
|
|
|
+ company.forEach((item) => {
|
|
|
+ item.children.forEach((childs) => {
|
|
|
+ //渲染全部
|
|
|
+ if (childs.children && childs.children.length > 0) {
|
|
|
+ childs.children.forEach((child, index) => {
|
|
|
+ if (child.value == value) {
|
|
|
+ cityName = child.city;
|
|
|
+ poiName = child.label;
|
|
|
+ poiInfo = child;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (childs.value == value) {
|
|
|
+ cityName = childs.city;
|
|
|
+ poiName = childs.label;
|
|
|
+ poiInfo = childs;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.poiName = poiName;
|
|
|
+ this.poiInfo = poiInfo;
|
|
|
+ if (cityName != "") {
|
|
|
+ this.city = cityName;
|
|
|
+ this.region = this.dataSource[cityName];
|
|
|
+ //重新加载地图
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initChart(cityName);
|
|
|
+ this.$emit("mapClick", {
|
|
|
+ name: cityName,
|
|
|
+ deep: 2,
|
|
|
+ curCompany: e,
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss">
|
|
|
+ .data-province {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // background: url("../../../assets/images/main/map_bg2.gif") no-repeat;
|
|
|
+ // background-size: 100% 90%;
|
|
|
+ // mix-blend-mode: multiply;
|
|
|
+ .map{
|
|
|
+ margin-top: -30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-map-data {
|
|
|
+ position: relative;
|
|
|
+ .bottom-area {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
|
|
+
|
