最近項目中用到可視化地圖，正好這幾天有空整理下以方便以後快速上手使用的記錄。 不廢話~ 我們項目是用的uinapp 剛開是也是npm 裝包 npm install echarts -S //或 cnpm install echarts -S 你隨意。 window.wx = undefined; 這 ...
最近項目中用到可視化地圖，正好這幾天有空整理下以方便以後快速上手使用的記錄。
不廢話~ 我們項目是用的uinapp 剛開是也是npm 裝包
npm install echarts -S //或
cnpm install echarts -S
你隨意。
window.wx = undefined; 這個時處理不相容uinapp 時操作異常，我項目的時候會出現點擊沒反應和不能移動和亂跑的情況，在main.js 中寫window.wx = undefined; 就好了。
然後在項目中引入
在新建一個ID節點
要給id,ref是我項目要用到，也要給寬高，我是圖方便展示寫行內了
這裡在進行一個初始化
然後這裡在調用 每次載入的json數據
同時肯定需要配置的參數以方便展示想要的地圖
// 配置參數 這裡是導出出去的 這需要dataS ：地圖省 市份數據 map：當前展示的地圖 val：展示的圖例 應為以上參數都需要動態的改變所以傳入 export const optionS = (dataS, map, val) => ({ visualMap: { min: 0, max: 1000, left: 26, bottom: 40, showLabel: !0, text: ['高', '低'], pieces: val ? pieces1 : pieces2, show: false, }, geo: { map, roam: 'scale', scaleLimit: { min: 0.5, max: 5, }, zoom: 1.2, // 圖形上的文本標簽，可用於說明圖形的一些數據信息 label: { normal: { show: true, fontSize: '10', color: 'rgba(0,0,0,0.7)', }, }, // 地圖區域的多邊形 圖形樣式，有 normal 和 emphasis 兩個狀態 itemStyle: { borderColor: 'rgba(255, 255, 255, 0.9)', color: '#e0e0e0', }, emphasis: { itemStyle: { areaColor: 'none', }, }, select: { label: { color: '#1A1A1A', fontWeight: 'bold', fontSize: 14, }, itemStyle: { borderColor: 'rgb(255, 255, 255)', borderWidth: 2, color: '#e0e0e0', // areaColor: 'none', }, }, }, series: [ { name: '信息量', type: 'map', // 這裡是'china',及因為js中註冊的名字，如果是上海市，則該出需pName 指的是'shanghai' mapType: map, geoIndex: 0, data: dataS, }, ], });
這裡進行輸入海南需要定位中心點特殊處理
這裡是點擊時做的一些操作同時點擊市可以判斷當前點擊的是市還是省，縣也是同理以便去生成地圖json數據模型和地圖數據。
記住點擊時，地圖json數據要載入在地圖數據前。不然地圖模型還沒生成，數據就已經請求回來了
建議用Promise.all 我這這是一個示例。
當然最後你們最關心的json模型數據給你安排好了 阿裡雲盤 不限速
https://www.aliyundrive.com/s/MtoBAhiC1N2
然後我們康康效果
