資訊專欄INFORMATION COLUMN
摘要：實現省與中國地圖之間的切換數據可視化這東西到處都需要使用或早或晚這東西都要接觸到自然地圖和可視化結合在一起也是早晚的需求雖然地圖之間的切換只是一個很小的功能但說不定什么時候就要用到現在看一看里面的坑也是好的效果差不多就是這樣點擊省切換到省
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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102869.html
摘要：最終自定義事件封裝在上面的鏈接中看到，不僅應用層頁面的按鈕可以切換地圖維度，直接點擊地圖里的中國區域也能切換地圖，同時又能通知到應用層頁面的按鈕改變狀態。 前言 很早以前寫過一篇用RequireJS包裝AjaxChart，當時用Highcharts做圖表，在其上封裝了一層ajax，最后只是簡單套用了一下requireJS。由于當時自己才接觸模塊化，理解層面還太淺，后來經過其他項目的磨練...
摘要：需求展示西安市各區縣的地圖，點擊各區縣下鉆到各鄉鎮街道，只能內網環境使用，不可用通過百度高德地圖來實現。利用展示自定義的地圖關于具體如何導入格式數據到的方法，可以參考官方示例。 需求 展示西安市各區縣的地圖，點擊各區縣下鉆到各鄉鎮/街道，只能內網環境使用，不可用通過百度/高德地圖來實現。 解決 利用地圖數據生成區域的geojson 網絡上大部分地圖數據只是到省市，最多到區縣，再往下的數...
摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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...
摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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...
閱讀 1669·2021-10-13 09:39
閱讀 2098·2021-09-07 10:20
閱讀 2678·2019-08-30 15:56
閱讀 2944·2019-08-30 15:56
閱讀 932·2019-08-30 15:55
閱讀 624·2019-08-30 15:46
閱讀 3494·2019-08-30 15:44
閱讀 2552·2019-08-30 11:15
