echarts实现省与中国地图之间的切换

malakashi 发布于2019-08-23 16:17 / 1852人阅读

摘要：实现省与中国地图之间的切换数据可视化这东西到处都需要使用或早或晚这东西都要接触到自然地图和可视化结合在一起也是早晚的需求虽然地图之间的切换只是一个很小的功能但说不定什么时候就要用到现在看一看里面的坑也是好的效果差不多就是这样点击省切换到省

echarts实现省与中国地图之间的切换

数据可视化这东西到处都需要使用,或早或晚echats这东西都要接触到,自然地图和可视化结合在一起也是早晚的需求,虽然地图之间的切换只是一个很小的功能,但说不定什么时候就要用到,现在看一看里面的坑也是好的!

效果差不多就是这样

点击省 -> 切换到省 -> 再点切换到中国地图

代码

// console.log("start")

import echarts from "echarts"
import china from "echarts/map/js/china"
// import sichuan from "echarts/map/js/province/sichuan"
// import anhui from "echarts/map/js/province/anhui"

//定义全国省份的数组
let provinces = ["shanghai", "hebei","shanxi","neimenggu","liaoning","jilin","heilongjiang","jiangsu","zhejiang","anhui","fujian","jiangxi","shandong","henan","hubei","hunan","guangdong","guangxi","hainan","sichuan","guizhou","yunnan","xizang","shanxi1","gansu","qinghai","ningxia","xinjiang", "beijing", "tianjin", "chongqing", "xianggang", "aomen", "taiwan"]
 
let provincesText = ["上海", "河北", "山西", "内蒙古", "辽宁", "吉林","黑龙江",  "江苏", "浙江", "安徽", "福建", "江西", "山东","河南", "湖北", "湖南", "广东", "广西", "海南", "四川", "贵州", "云南", "西藏", "陕西", "甘肃", "青海", "宁夏", "新疆", "北京", "天津", "重庆", "香港", "澳门", "台湾"]

// 初始化echarts
let map = echarts.init(document.getElementById("map"))
// console.log(map)

// 定义初始加载的地图区域,中国地图
let selected = "china"

// 定义加载地图的方法
// 参数为要显示地图区域的名字
let loadMap = (param) => {
  map.setOption({
    geo: {
      // map: "china" | "四川"
      // 必须要先引入了对应地图的js文件或者json文件，在这一步的时候，echarts会自动将对应的JS文件注入，地图才会显示.
      map: param
    }
  })
}

// 第一次加载地图
loadMap(selected)

// 判断当前要加载的地图是不是省？
let isProvince = (name) => {
  return provincesText.some((province) => {
    return province === name
  })
}

// 定义方法加载某个省的地图文件
let loadScriptMap = (name, callback) => {
  // 获取这个省的拼音名字 name = "四川" => pinyinName = "sichuan"
  let pinyinName = provinces[provincesText.indexOf(name)]
  console.log(pinyinName)
  // 引入这个对应的地图JS，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
  // build的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
  let currentMap = require(`echarts/map/js/province/${pinyinName}`)
  callback(name)
}

// 监听地图点击事件
map.on("click", (ev) => {
  // 如果点击的是一个省，那就切换到这个省的地图
  if (isProvince(ev.name)) {
    selected = ev.name
    console.log(selected)
    // 从外部加载这个省的地图文件
    loadScriptMap(ev.name, loadMap)
  } else {
    // 否则切换中国地图
    selected = "china"
    loadMap(selected)
  }
})

坑

1.要渲染地图,需要地图对应的js或json文件,在echart包里面,要显示省的地图的话也需要相对应的sichuan.js,并不是一个china.js就可以搞定的!

2.要显示中国地图需要map: "china",这是很明显的暗示,那要显示某个省的地图按道理就该这样写 map: "sichuan",然而这样就错了,你必须要这样 map: "四川",你需要写汉字

最后要是有朋友想要参考一下github

混合云专线服务 . 防火墙的功能有如下哪些? 隔离不同安全级别的网络实现不同安全级别的网络之间 4. 防火墙的功能有如下哪些? 隔离不同安全级别的网络实现不同安全级别的网络之间实现语言切换 echarts的加速cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102869.html

前端模块化开发demo之攻击地图

摘要：最终自定义事件封装在上面的链接中看到，不仅应用层页面的按钮可以切换地图维度，直接点击地图里的中国区域也能切换地图，同时又能通知到应用层页面的按钮改变状态。前言很早以前写过一篇用RequireJS包装AjaxChart，当时用Highcharts做图表，在其上封装了一层ajax，最后只是简单套用了一下requireJS。由于当时自己才接触模块化，理解层面还太浅，后来经过其他项目的磨练...

xiaowugui666 2019-08-19 17:10 评论0 收藏0
【echarts地图制作】下钻到乡镇/街道级别的

摘要：需求展示西安市各区县的地图，点击各区县下钻到各乡镇街道，只能内网环境使用，不可用通过百度高德地图来实现。利用展示自定义的地图关于具体如何导入格式数据到的方法，可以参考官方示例。需求展示西安市各区县的地图，点击各区县下钻到各乡镇/街道，只能内网环境使用，不可用通过百度/高德地图来实现。解决利用地图数据生成区域的geojson 网络上大部分地图数据只是到省市，最多到区县，再往下的数...

宠来也 2019-08-23 14:28 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

godlong_X 2019-08-05 18:13 评论0 收藏0