Vue中如何实现城市3D分布图

itclanCoder2023-09-09 11:29

cityfenbu.vue

go 复制代码 
<template>
    <div >
         <el-card class="seriesmap-box-card">
            <div slot="header" class="clearfix">
              <span>城市分布图 (点击可下钻到县)</span>
            </div>
            <div>
                <div class="series-map" :style="{height:height,width:width}" ref="seriesMap"></div>
            </div>
         </el-card>
    </div>
  </template>
  
  <script>
  import resize from './resize.js';
  import echarts from 'echarts';
  import { getGeoJson } from './getGeoJson.js';
  import { getMapChartData } from './getMapChartData.js';
  export default {
    name: 'cityfenbu',
    mixins: [resize],
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '608px'
      }
    },
    data() {
      return {
        geoJson: {},
        parentInfo: [
          {
            cityName: '全国',
            code: 100000
          }
        ]
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.getMapJson();
      });
    },
    methods: {
      //获取geoJson 地图 已封装好直接传citycode就行
      getMapJson() {
        getGeoJson(this.parentInfo[this.parentInfo.length - 1].code).then(data => {
          this.geoJson = data;
          this.getMapData();
        });
      },
      //获取地图数据 模拟数据 数据格式：[{name:'武汉市',value:96},{name:'长沙市',value:75}]
      // 必须要写成这种,而且name名字要和地图的geoJson名字一样，不然渲染不出来
      getMapData() {
        getMapChartData(this.parentInfo[this.parentInfo.length - 1].code).then(res => {
          const data = res.data;
          this.initEchart(data);
        });
      },
      initEchart(data) {
        this.myChart = echarts.init(this.$refs.seriesMap);
        //设置为 china 则显示南海诸岛 ，不需要可以去掉
        echarts.registerMap(this.parentInfo.length === 1 ? 'china' : 'map', this.geoJson); //注册
  
        const mapData = data.sort((a, b) => {
          return b.value - a.value;
        });
        let max = mapData[0].value;
        let min = mapData[mapData.length - 1].value;
        if (mapData.length === 1) {
          min = 0;
        }
  
        this.myChart.setOption(
          {
            tooltip: {},
            visualMap: {
              min: min,
              max: max,
              left: '3%',
              bottom: '1%',
              calculable: true,
              inRange: {
                color: ['#24CFF4', '#2E98CA', '#1E62AC']
              },
              textStyle: {
                color: '#24CFF4'
              }
            },
            series: [
              {
                name: '地图',
                type: 'map',
                map: this.parentInfo.length === 1 ? 'china' : 'map',
                roam: true, //是否可缩放
                zoom: 1.22, //缩放比例
                // left: '',
                // top: '15%', //可移动地图的位置
                data: mapData,
                label: {
                  normal: {
                    show: true,
                    color: 'rgb(249, 249, 249)', //省份标签字体颜色
                    formatter: p => {
                      switch (p.name) {
                        case '内蒙古自治区':
                          p.name = '内蒙古';
                          break;
                        case '西藏自治区':
                          p.name = '西藏';
                          break;
                        case '新疆维吾尔自治区':
                          p.name = '新疆';
                          break;
                        case '宁夏回族自治区':
                          p.name = '宁夏';
                          break;
                        case '广西壮族自治区':
                          p.name = '广西';
                          break;
                        case '香港特别行政区':
                          p.name = '香港';
                          break;
                        case '澳门特别行政区':
                          p.name = '澳门';
                          break;
                        default:
                          break;
                      }
                      return p.name;
                    }
                  },
                  emphasis: {
                    show: true,
                    color: '#f75a00'
                  }
                },
                itemStyle: {
                  normal: {
                    areaColor: '#24CFF4',
                    borderColor: '#53D9FF',
                    borderWidth: 1.3,
                    shadowBlur: 15,
                    shadowColor: 'rgb(58,115,192)',
                    shadowOffsetX: 7,
                    shadowOffsetY: 6
                  },
                  emphasis: {
                    areaColor: '#8dd7fc',
                    borderWidth: 1.6,
                    shadowBlur: 25
                  }
                }
              }
            ]
          },
          true
        );
  
        this.myChart.getZr().off('click');
        this.myChart.getZr().on('click', params => {
          if (params.target) {
            // 点的是地图
            const index = params.target.dataIndex;
            if (index && data[index]) {
              //如果当前是最后一级了，就直接return
              if (this.parentInfo[this.parentInfo.length - 1].code == data[index].adcode) {
                return;
              }
              //根据这个level判断是否下钻到县
              // if (data[index].level == 'city') {
              // return
              // }
              this.parentInfo.push({
                cityName: data[index].name,
                code: data[index].adcode
              });
              this.getMapJson();
             this.$notify.info({
                title: '温馨提示',
                message: '点击地图空白处即可返回上一级'
             });
            }
          } else {
            //点的空白部分
            if (this.parentInfo.length === 1) {
              return;
            }
            this.parentInfo.pop();
            this.getMapJson();
          }
        });
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .seriesmap-box-card {
    color:rgb(191, 203, 217);
    background:#2d3a4b;
    width: 100%;
    height: 100%;
    font-size: 14px;
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }
    .series-map {
      cursor:move;
    }
  }
  </style>

resize.js

go 复制代码 
import { debounce } from "./debounce.js";
export default {
  data() {
    return {
      myChart: null,
      resizeHandler: null
    };
  },
  computed: {},
  mounted() {
    this.resizeHandler = debounce(() => {
      if (this.myChart) {
        this.myChart.resize();
      }
    }, 100);
    this.initResizeEvent();
  },

  methods: {
    //监听resize
    initResizeEvent() {
      window.addEventListener("resize", this.resizeHandler);
    },
    //移除resize
    destroyResizeEvent() {
      window.removeEventListener("resize", this.resizeHandler);
    }
  },

  beforeDestroy() {
    this.destroyResizeEvent();
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart.off("click");
    this.myChart = null;
  },

  activated() {
    this.initResizeEvent();
    if (this.myChart) {
      this.myChart.resize();
    }
  },

  deactivated() {
    this.destroyResizeEvent();
  },
  watch: {}
};

getGeoJson.js

go 复制代码 
/**
 * 获取geoJson数据 通过高德获取 递归获取区县geoJson
 * @param {string} adcode 行政区code
 * @param {string} childAdcode 区县级行政区code
 * @return {Array}
 */

import remoteLoad from "./remoteLoad.js";
const  {AMapCDN, AMapUiCDN} = require("./cdn.js");

export function getGeoJson(adcode, childAdcode = "") {
    return new Promise((resolve, reject) => {
      if (window.AMap && window.AMapUI) {
        insideFun(adcode, childAdcode);
      } else {
        remoteLoad(AMapCDN).then(() => {
          if (window.AMap) {
            remoteLoad(AMapUiCDN).then(() => {
              if (window.AMapUI) {
                insideFun(adcode, childAdcode);
              } else {
                console.error("AMapUI获取失败");
              }
            });
          } else {
            console.error("AMap获取失败");
          }
        });
      }
      function insideFun(adcode, childAdcode) {
        // eslint-disable-next-line
        AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
          var districtExplorer = new DistrictExplorer();
          districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
            if (error) {
              console.error(error);
              reject(error);
              return;
            }
            let Json = areaNode.getSubFeatures();
            if (Json.length === 0) {
              let parent = areaNode._data.geoData.parent.properties.acroutes;
              insideFun(parent[parent.length - 1], adcode);
              return;
            }
  
            if (childAdcode) {
              Json = Json.filter(item => {
                return item.properties.adcode == childAdcode;
              });
            }
            let mapJson = {
              features: Json
            };
            resolve(mapJson);
          });
        });
      }
    });
  }

getMapChartData.js

go 复制代码 
import { getGeoJson } from "./getGeoJson.js";

/** 地图数据
 * @param {string} adcode 城市code
 * @returns {Array}
 */
export function getMapChartData(adcode) {
  return new Promise((resolve, reject) => {
    getGeoJson(adcode)
      .then(res => {
        const data = res.features;
        const mapData = data.map(item => {
          return {
            name: item.properties.name,
            value: parseFloat((Math.random() * 3000).toFixed(2)),
            adcode: item.properties.adcode,
            level: item.properties.level
          };
        });
        resolve({
          code: 200,
          data: mapData
        });
      })
      .catch(error => {
        reject(error);
      });
  });
}

/** 地图数据 散点
 * @param {string} adcode 城市code
 * @returns {Array}
 */
export function getPointChartData(adcode) {
  return new Promise((resolve, reject) => {
    getGeoJson(adcode)
      .then(res => {
        const data = res.features;
        const mapData = data.map(item => {
          return {
            name: item.properties.name,
            value: [
              item.properties.center[0],
              item.properties.center[1],
              parseFloat((Math.random(0.1, 1) * 1000).toFixed(2))
            ],
            adcode: item.properties.adcode,
            level: item.properties.level
          };
        });
        resolve({
          code: 200,
          data: mapData
        });
      })
      .catch(error => {
        reject(error);
      });
  });
}

/** 地图数据 热力图
 * @param {string} adcode 城市code
 * @returns {Array}
 */
export function getHotMapChartData(adcode) {
  const data = [
    {
      name: "地点1",
      value: [114.412021, 30.481201, 1000]
    },
    {
      name: "地点2",
      value: [114.411266, 30.480921, 1000]
    },
    {
      name: "地点3",
      value: [114.411985, 30.481387, 1000]
    },
    {
      name: "地点4",
      value: [114.411159, 30.481917, 1000]
    },
    {
      name: "地点5",
      value: [114.412488, 30.481917, 1000]
    },
    {
      name: "地点6",
      value: [114.413638, 30.482726, 1000]
    },
    {
      name: "地点7",
      value: [114.412344, 30.48341, 1000]
    },
    {
      name: "地点8",
      value: [114.413494, 30.483939, parseInt(Math.random(0.6, 1) * 1000)]
    },
    {
      name: "地点9",
      value: [114.411877, 30.484469, parseInt(Math.random(0.6, 1) * 1000)]
    },
    {
      name: "地点10",
      value: [114.412308, 30.484531, parseInt(Math.random(0.6, 1) * 1000)]
    },
    {
      name: "地点11",
      value: [114.407853, 30.4845, parseInt(Math.random(0.6, 1) * 1000)]
    },
    {
      name: "地点12",
      value: [114.407242, 30.48285, parseInt(Math.random(0.1, 0.5) * 1000)]
    },
    {
      name: "地点13",
      value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    },
    {
      name: "地点14",
      value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    },
    {
      name: "地点15",
      value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    },
    {
      name: "地点16",
      value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    },
    {
      name: "地点17",
      value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    },
    {
      name: "地点18",
      value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    },
    {
      name: "地点19",
      value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    },
    {
      name: "地点20",
      value: [114.447306, 30.560407, parseInt(Math.random(0.1, 0.9) * 1000)]
    },
    {
      name: "地点21",
      value: [114.296104, 30.600017, parseInt(Math.random(0.1, 0.9) * 1000)]
    },
    {
      name: "地点22",
      value: [114.29402, 30.597406, parseInt(Math.random(0.1, 0.9) * 1000)]
    },
    {
      name: "地点23",
      value: [114.300487, 30.595106, parseInt(Math.random(0.1, 0.9) * 1000)]
    },
    {
      name: "地点24",
      value: [114.295026, 30.592805, parseInt(Math.random(0.1, 0.9) * 1000)]
    },
    {
      name: "地点25",
      value: [114.291648, 30.597282, 1000]
    },
    {
      name: "地点26",
      value: [114.287408, 30.599147, 1000]
    },
    {
      name: "地点27",
      value: [114.282378, 30.598649, 1000]
    },
    {
      name: "地点28",
      value: [114.286689, 30.600514, 1000]
    }
  ];
  return new Promise((resolve, reject) => {
    resolve({
      code: 200,
      data: data
    });
  });
}

remoteLoad.js

go 复制代码 
const remoteLoad = url => {
    return new Promise((resolve, reject) => {
      const existingScript = document.getElementById(url);
      //如果script不存在
      if (!existingScript) {
        const script = document.createElement("script");
        script.id = url;
        script.src = url;
        script.async = true;
        document.body.appendChild(script);
        script.onload = function() {
          setTimeout(() => {
            this.onerror = this.onload = null;
            resolve();
          }, 500);
        };
        script.onerror = function() {
          this.onerror = this.onload = null;
          reject("加载失败" + url);
        };
      } else {
        setTimeout(() => {
          resolve();
        }, 500);
      }
    });
  };
  
  export default remoteLoad;

cdn.js

go 复制代码 
const AMapCDN =
  "https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a&plugin=AMap.DistrictSearch";
const AMapUiCDN = "https://webapi.amap.com/ui/1.0/main.js";
const VueCDN = "https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js";
const AxiosCDN = "https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js";
const VueRouterCDN =
  "https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js";
const VuexCDN = "https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js";
const TinymceCDN =
  "https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js";
const html2canvasCDN =
  "https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js";

module.exports = {
  AMapCDN,
  AMapUiCDN,
  VueCDN,
  AxiosCDN,
  VueRouterCDN,
  VuexCDN,
  TinymceCDN,
  html2canvasCDN
};

<>

视频号如何做视频任务进行变现
<>

2023-09-05

<>

视频号如何插入带货商品链接进行变现
<>

2023-09-04

<>

36岁男子自称被裁,曾是前500强公司市场总监,最后接受做外买
<>

2023-09-03

<>

聊一下互联网红利并牢牢抓住
<>

2023-09-02

<>

关于大学考研与不考研自己一点看法
<>

2023-09-01

<>

css中文本阴影特效
<>

2023-08-30

(能绘画,能问答)

(拓展人脉,圈子)

相关推荐
EterNity_TiMe_9 分钟前
【论文复现】农作物病害分类(Web端实现)
前端·人工智能·python·机器学习·分类·数据挖掘
余生H29 分钟前
深入理解HTML页面加载解析和渲染过程（一）
前端·html·渲染
吴敬悦1 小时前
领导：按规范提交代码conventionalcommit
前端·程序员·前端工程化
ganlanA1 小时前
uniapp+vue 前端防多次点击表单，防误触多次请求方法。
前端·vue.js·uni-app
卓大胖_1 小时前
Next.js 新手容易犯的错误 _ 性能优化与安全实践（6）
前端·javascript·安全
m0_748246351 小时前
Spring Web MVC：功能端点（Functional Endpoints）
前端·spring·mvc
CodeClimb1 小时前
【华为OD-E卷 - 猜字谜100分（python、java、c++、js、c）】
java·javascript·c++·python·华为od
SomeB1oody1 小时前
【Rust自学】6.4. 简单的控制流-if let
开发语言·前端·rust
云只上1 小时前
前端项目 node_modules依赖报错解决记录
前端·npm·node.js
程序员_三木1 小时前
在 Vue3 项目中安装和配置 Three.js
前端·javascript·vue.js·webgl·three.js
热门推荐
01Gitlab ci/cd02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04docker安装启动问题解决排查05优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间06HCIA-datacom数通题库和录播视频资料07新手学习VR全景需要知道的几个问题08【一文读懂】NTN（非地面网络）技术介绍09支付宝短视频平台创作分成激励项目10RAG 实践- Ollama+RagFlow 部署本地知识库