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

    178775c61d0b1e487633f49f70c844b4.png

    cityfenbu.vue

    2.   
    3.   
    4.   "scss" scoped>
    5.   .seriesmap-box-card {
    6.     color:rgb(191, 203, 217);
    7.     background:#2d3a4b;
    8.     width: 100%;
    9.     height: 100%;
    10.     font-size: 14px;
    11.     .clearfix:before,
    12.     .clearfix:after {
    13.       display: table;
    14.       content: "";
    15.     }
    16.     .clearfix:after {
    17.       clear: both
    18.     }
    19.     .series-map {
    20.       cursor:move;
    21.     }
    22.   }
    23.   

    resize.js

    1. import { debounce } from "./debounce.js";
    2. export default {
    3.   data() {
    4.     return {
    5.       myChart: null,
    6.       resizeHandler: null
    7.     };
    8.   },
    9.   computed: {},
    10.   mounted() {
    11.     this.resizeHandler = debounce(() => {
    12.       if (this.myChart) {
    13.         this.myChart.resize();
    14.       }
    15.     }, 100);
    16.     this.initResizeEvent();
    17.   },
    18.  
    19.   methods: {
    20.     //监听resize
    21.     initResizeEvent() {
    22.       window.addEventListener("resize", this.resizeHandler);
    23.     },
    24.     //移除resize
    25.     destroyResizeEvent() {
    26.       window.removeEventListener("resize", this.resizeHandler);
    27.     }
    28.   },
    29.  
    30.   beforeDestroy() {
    31.     this.destroyResizeEvent();
    32.     if (!this.myChart) {
    33.       return;
    34.     }
    35.     this.myChart.dispose();
    36.     this.myChart.off("click");
    37.     this.myChart = null;
    38.   },
    39.  
    40.   activated() {
    41.     this.initResizeEvent();
    42.     if (this.myChart) {
    43.       this.myChart.resize();
    44.     }
    45.   },
    46.  
    47.   deactivated() {
    48.     this.destroyResizeEvent();
    49.   },
    50.   watch: {}
    51. };

    getGeoJson.js

    1. /**
    2.  * 获取geoJson数据 通过高德获取 递归获取区县geoJson
    3.  * @param {string} adcode 行政区code
    4.  * @param {string} childAdcode 区县级行政区code
    5.  * @return {Array}
    6.  */
    7.  
    8. import remoteLoad from "./remoteLoad.js";
    9. const  {AMapCDN, AMapUiCDN} = require("./cdn.js");
    10.  
    11. export function getGeoJson(adcode, childAdcode = "") {
    12.     return new Promise((resolve, reject) => {
    13.       if (window.AMap && window.AMapUI) {
    14.         insideFun(adcode, childAdcode);
    15.       } else {
    16.         remoteLoad(AMapCDN).then(() => {
    17.           if (window.AMap) {
    18.             remoteLoad(AMapUiCDN).then(() => {
    19.               if (window.AMapUI) {
    20.                 insideFun(adcode, childAdcode);
    21.               } else {
    22.                 console.error("AMapUI获取失败");
    23.               }
    24.             });
    25.           } else {
    26.             console.error("AMap获取失败");
    27.           }
    28.         });
    29.       }
    30.       function insideFun(adcode, childAdcode) {
    31.         // eslint-disable-next-line
    32.         AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
    33.           var districtExplorer = new DistrictExplorer();
    34.           districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
    35.             if (error) {
    36.               console.error(error);
    37.               reject(error);
    38.               return;
    39.             }
    40.             let Json = areaNode.getSubFeatures();
    41.             if (Json.length === 0) {
    42.               let parent = areaNode._data.geoData.parent.properties.acroutes;
    43.               insideFun(parent[parent.length - 1], adcode);
    44.               return;
    45.             }
    46.   
    47.             if (childAdcode) {
    48.               Json = Json.filter(item => {
    49.                 return item.properties.adcode == childAdcode;
    50.               });
    51.             }
    52.             let mapJson = {
    53.               features: Json
    54.             };
    55.             resolve(mapJson);
    56.           });
    57.         });
    58.       }
    59.     });
    60.   }

    getMapChartData.js

    1. import { getGeoJson } from "./getGeoJson.js";
    2.  
    3. /** 地图数据
    4.  * @param {string} adcode 城市code
    5.  * @returns {Array}
    6.  */
    7. export function getMapChartData(adcode) {
    8.   return new Promise((resolve, reject) => {
    9.     getGeoJson(adcode)
    10.       .then(res => {
    11.         const data = res.features;
    12.         const mapData = data.map(item => {
    13.           return {
    14.             name: item.properties.name,
    15.             value: parseFloat((Math.random() * 3000).toFixed(2)),
    16.             adcode: item.properties.adcode,
    17.             level: item.properties.level
    18.           };
    19.         });
    20.         resolve({
    21.           code: 200,
    22.           data: mapData
    23.         });
    24.       })
    25.       .catch(error => {
    26.         reject(error);
    27.       });
    28.   });
    29. }
    30.  
    31. /** 地图数据 散点
    32.  * @param {string} adcode 城市code
    33.  * @returns {Array}
    34.  */
    35. export function getPointChartData(adcode) {
    36.   return new Promise((resolve, reject) => {
    37.     getGeoJson(adcode)
    38.       .then(res => {
    39.         const data = res.features;
    40.         const mapData = data.map(item => {
    41.           return {
    42.             name: item.properties.name,
    43.             value: [
    44.               item.properties.center[0],
    45.               item.properties.center[1],
    46.               parseFloat((Math.random(0.1, 1) * 1000).toFixed(2))
    47.             ],
    48.             adcode: item.properties.adcode,
    49.             level: item.properties.level
    50.           };
    51.         });
    52.         resolve({
    53.           code: 200,
    54.           data: mapData
    55.         });
    56.       })
    57.       .catch(error => {
    58.         reject(error);
    59.       });
    60.   });
    61. }
    62.  
    63. /** 地图数据 热力图
    64.  * @param {string} adcode 城市code
    65.  * @returns {Array}
    66.  */
    67. export function getHotMapChartData(adcode) {
    68.   const data = [
    69.     {
    70.       name: "地点1",
    71.       value: [114.412021, 30.481201, 1000]
    72.     },
    73.     {
    74.       name: "地点2",
    75.       value: [114.411266, 30.480921, 1000]
    76.     },
    77.     {
    78.       name: "地点3",
    79.       value: [114.411985, 30.481387, 1000]
    80.     },
    81.     {
    82.       name: "地点4",
    83.       value: [114.411159, 30.481917, 1000]
    84.     },
    85.     {
    86.       name: "地点5",
    87.       value: [114.412488, 30.481917, 1000]
    88.     },
    89.     {
    90.       name: "地点6",
    91.       value: [114.413638, 30.482726, 1000]
    92.     },
    93.     {
    94.       name: "地点7",
    95.       value: [114.412344, 30.48341, 1000]
    96.     },
    97.     {
    98.       name: "地点8",
    99.       value: [114.413494, 30.483939, parseInt(Math.random(0.6, 1) * 1000)]
    100.     },
    101.     {
    102.       name: "地点9",
    103.       value: [114.411877, 30.484469, parseInt(Math.random(0.6, 1) * 1000)]
    104.     },
    105.     {
    106.       name: "地点10",
    107.       value: [114.412308, 30.484531, parseInt(Math.random(0.6, 1) * 1000)]
    108.     },
    109.     {
    110.       name: "地点11",
    111.       value: [114.407853, 30.4845, parseInt(Math.random(0.6, 1) * 1000)]
    112.     },
    113.     {
    114.       name: "地点12",
    115.       value: [114.407242, 30.48285, parseInt(Math.random(0.1, 0.5) * 1000)]
    116.     },
    117.     {
    118.       name: "地点13",
    119.       value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    120.     },
    121.     {
    122.       name: "地点14",
    123.       value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    124.     },
    125.     {
    126.       name: "地点15",
    127.       value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    128.     },
    129.     {
    130.       name: "地点16",
    131.       value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    132.     },
    133.     {
    134.       name: "地点17",
    135.       value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    136.     },
    137.     {
    138.       name: "地点18",
    139.       value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    140.     },
    141.     {
    142.       name: "地点19",
    143.       value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
    144.     },
    145.     {
    146.       name: "地点20",
    147.       value: [114.447306, 30.560407, parseInt(Math.random(0.1, 0.9) * 1000)]
    148.     },
    149.     {
    150.       name: "地点21",
    151.       value: [114.296104, 30.600017, parseInt(Math.random(0.1, 0.9) * 1000)]
    152.     },
    153.     {
    154.       name: "地点22",
    155.       value: [114.29402, 30.597406, parseInt(Math.random(0.1, 0.9) * 1000)]
    156.     },
    157.     {
    158.       name: "地点23",
    159.       value: [114.300487, 30.595106, parseInt(Math.random(0.1, 0.9) * 1000)]
    160.     },
    161.     {
    162.       name: "地点24",
    163.       value: [114.295026, 30.592805, parseInt(Math.random(0.1, 0.9) * 1000)]
    164.     },
    165.     {
    166.       name: "地点25",
    167.       value: [114.291648, 30.597282, 1000]
    168.     },
    169.     {
    170.       name: "地点26",
    171.       value: [114.287408, 30.599147, 1000]
    172.     },
    173.     {
    174.       name: "地点27",
    175.       value: [114.282378, 30.598649, 1000]
    176.     },
    177.     {
    178.       name: "地点28",
    179.       value: [114.286689, 30.600514, 1000]
    180.     }
    181.   ];
    182.   return new Promise((resolve, reject) => {
    183.     resolve({
    184.       code: 200,
    185.       data: data
    186.     });
    187.   });
    188. }

    remoteLoad.js

    1. const remoteLoad = url => {
    2.     return new Promise((resolve, reject) => {
    3.       const existingScript = document.getElementById(url);
    4.       //如果script不存在
    5.       if (!existingScript) {
    6.         const script = document.createElement("script");
    7.         script.id = url;
    8.         script.src = url;
    9.         script.async = true;
    10.         document.body.appendChild(script);
    11.         script.onload = function() {
    12.           setTimeout(() => {
    13.             this.onerror = this.onload = null;
    14.             resolve();
    15.           }, 500);
    16.         };
    17.         script.onerror = function() {
    18.           this.onerror = this.onload = null;
    19.           reject("加载失败" + url);
    20.         };
    21.       } else {
    22.         setTimeout(() => {
    23.           resolve();
    24.         }, 500);
    25.       }
    26.     });
    27.   };
    28.   
    29.   export default remoteLoad;

    cdn.js

    1. const AMapCDN =
    2.   "https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a&plugin=AMap.DistrictSearch";
    3. const AMapUiCDN = "https://webapi.amap.com/ui/1.0/main.js";
    4. const VueCDN = "https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js";
    5. const AxiosCDN = "https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js";
    6. const VueRouterCDN =
    7.   "https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js";
    8. const VuexCDN = "https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js";
    9. const TinymceCDN =
    10.   "https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js";
    11. const html2canvasCDN =
    12.   "https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js";
    13.  
    14. module.exports = {
    15.   AMapCDN,
    16.   AMapUiCDN,
    17.   VueCDN,
    18.   AxiosCDN,
    19.   VueRouterCDN,
    20.   VuexCDN,
    21.   TinymceCDN,
    22.   html2canvasCDN
    23. };

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

    2023-09-05

    380aa791f41ecbf439667a54d080e02a.jpeg

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

    2023-09-04

    18d58b43f50326bf75f5ddf723f04b24.jpeg

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

    2023-09-03

    2944e1dee434498ac35ac381d15e1185.jpeg

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

    2023-09-02

    b0b405f1be0254fb3c3ed981e3f1f698.jpeg

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

    2023-09-01

    1d31375fc500862aefaaa7729b46ed15.jpeg

    css中文本阴影特效

    2023-08-30

    f937bf70bf5017f39012ba075716e048.jpeg

    8d5b7ba2bc51eef1736bdce50d22f2f7.png

    (能绘画,能问答)

    f43e85a14eb42c562714935bde373b41.jpeg

    (拓展人脉,圈子)

  • 相关阅读:
    openarena
    如何基于先进视频技术，构建互联网视频监控安全管理平台解决方案
    net基于asp.net的二手商品的交易系统-二手网站-计算机毕业设计
    SpringBoot SpringBoot 开发实用篇 4 数据层解决方案 4.14 ES 索引操作
    ＜蓝桥杯软件赛＞零基础备赛20周--第5周--杂题-2
    美团面试拷打：Redis 缓存穿透、缓存击穿、缓存雪崩区别和解决方案
    前端工作日常
    Linux学习——文件IO
    数字化新零售营销模式如何落地？数字化新零售营销功能推荐
    ​7.1 项目1 学生通讯录管理：文本文件增删改查（C++版本）(自顶向下设计+断点调试) (A)​
  • 原文地址：https://blog.csdn.net/wzc_coder/article/details/132749704