利用echarts展現旅行足跡

時間 2020-02-29

原文原文鏈接

前言

一直有個環遊世界的夢，周遊列國，體驗不一樣國家的人類文明，尋山訪水，體驗造物主大天然的偉大造化。畢竟人生不止眼前的苟且，還有詩和遠方。這麼多年以來，陸續走過了一些地方，每到一個地方，都讓我離夢想又近了一些。雖然我知道這比起環遊世界來講，還差不知道多少個山頭，可是我一直在往這個夢努力，靠近。但願終有一天，我能夠笑着對本身說，你作到了！
6年前，由於工做的緣由，我接觸過地圖應用的開發，從那時起，我對地圖的熱愛就埋在了心底。今年年中我帶爸媽旅了旅遊，去了一些我沒去過的地方，我好想有個地圖可讓我點亮一下，記錄一下我到過的新的「領土」。搜了下市面上已經存在的地圖應用，都不是我想要的，惟一比較符合個人需求的是百度旅遊裏面的一個小功能，叫作足跡地圖，可是彷佛早就中止了維護，數據停留在2016年。。。css

找不到趁手的工具，那就本身打造一把。是啊，爲何不本身開發一個呢？說幹就幹。html

工程搭建

首先用 cyt-cli 快速搭建項目框架。cyt-cli地址前端

cyt-cli 是一款能夠快速建立前端工程的腳手架，具備比較完善的webpack4配置，目前支持純js、vue、react等語言版本。
若是沒有安裝 cyt-cli ，先全局安裝一下： npm i -g cyt-cli。

cyt-cli create footprint
✔ fetching template ...
? please choose a template to create roject (Use arrow keys)
❯ swan-template 
  swan-vue-template 
  swan-react-template

由於想快速作出雛形來，因此使用最簡單的模版就行，選擇第一個 swan-template。
等待一會，工程就搭建好了。
生成的工程目錄：vue

|--build/ # webpack配置文件
|    |-- webpack.base.js
|    |-- webpack.dev.js
|    |-- webpack.prod.js
|--public/ # 首頁模版
|    |-- index.html
|--src/
|    |-- assets/ # 靜態資源，好比中國地圖數據
|    |-- components/ # 項目組件
|    |       |--  foo.js
|    |       |--  bar.js
|    |-- icon/ # 字體圖標
|    |-- images/ # 圖片資源
|    |-- theme/ # 樣式文件
|    |-- index.js # 項目入口
|--.babel.js # babel配置
|--.browserslistrc.json # 瀏覽器支持規則
|--.gitignore 
|--package.json
|--postcss.config.js # postcss插件配置
|--README.md

安裝一下依賴包。react

cd footprint
npm i

地圖選型

地圖展現我選擇了 echarts。 echarts官網webpack

npm i --save echarts

應用開發

個人核心需求很簡單，就是能夠把我去過的國家、省、市在地圖上展現出來便可。
先實現國內的省，開發邏輯很簡單：git

1.引入`echarts`

按需引用github

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';

2.處理用戶數據

給series的data用。web

let handleData = function(rawdata) {
    rowData.forEach(item => {
        item.value = FREQUENCY[item.value]
        if (item.value !== NEVER) {
            item.label = { show: true, color: LEBEL_COLOR }
        }
        if (item.value === NEVER) {
            never.push(item);
        } else if (item.value === ONECE) {
            onece.push(item);
        } else if (item.value === AFEWTIMES) {
            afewtimes.push(item);
        } else {
            usually.push(item);
        }
    });
    series = [usually, afewtimes, onece, never].map((item, index) => {
        let temp = {
            type: 'map',
            map: mapType,
            roam: true,
            itemStyle: {
                emphasis: { label: { show: true } },
                areaColor: '#fff'
            }
        };
        temp.name = legendData[index];
        temp.data = item;
        return temp;
    })
}

handleData(userData);

3.註冊`map`

echarts有個registerMap方法，echarts.registerMap(mapName, geoJson, specialAreas).apache

- mapName：地圖名稱，必定要與option->series->map對應的值相同。
- geoJson：GeoJson格式的數據，具體格式見 http://geojson.org/。
- specialAreas：可選。將地圖中的部分區域縮放到合適的位置，可使得整個地圖的顯示更加好看。

geoJson是地理信息數據，通常都很大，固然經過異步獲取。

util.get('assets/china.json').then(data => {
    let chinaJson = data;
    myChart.hideLoading();
    // 註冊地圖
    echarts.registerMap(mapName, chinaJson, {})
})

ECharts3提供的矢量地圖數據，在4版本後已經不提供下載服務了。官網的解釋是「因爲部分數據不符合國家《測繪法》規定」。不過，只要不商用，這些矢量數據仍是可使用的。有須要能夠到我這裏獲取 https://github.com/yc111/echa...

4.配置option顯示地圖

註冊地圖後進行其餘配置

// 指定圖表的配置項和數據
let option = {
    color: _color,
    title: _title,
    tooltip: _tooltip,
    legend: _legend,
    visualMap: _visualMap,
    toolbox: _toolbox,
    series: series
};
// 使用剛指定的配置項和數據顯示圖表
myChart.setOption(option);