Preface

There has always been a dream of traveling around the world, traveling around other countries, experiencing human civilization in different countries, seeking mountains and rivers, and experiencing the great creation of the creator nature. After all, life is not only about the present, but also about poetry and distance. Over the years, I have traveled a number of places. Every place I go, it brings me closer to my dream. Although I know it's not as many hills as traveling around the world, I've been trying to get closer to this dream. I hope one day, I can say to myself with a smile, congratulations, you have realized your dream, your life is meaningful, you have not lived in vain.

Six years ago, because of my work, I came into contact with the development of map application. Since then, my love for maps has been buried in my heart. This year, I took my parents on a trip to places I had never visited. I wanted to have a map to light up and record the new territory I had visited. Searching for map applications that already exist on the market are not what I want. The only thing that fits my needs is a little function in the tour, called footprint map, but it seems to have stopped maintenance for a long time, and the data stay in 2016.

If you can't find the tools at your disposal, make one yourself. Yeah, why don't you develop one yourself? Do as you say.

Engineering construction

Firstly, the project framework is built quickly with cyt-cli. cyt-cli address

cyt-cli is a scaffold that can quickly create front-end projects. It has a relatively perfect web Pack 4 configuration. At present, it supports pure js, vue, react and other language versions.
If cyt-cli is not installed, first install it globally: 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 

Because you want to make the prototype quickly, you can use the simplest template and choose the first swan-template.
Wait a minute and the project is ready.
The generated project catalogue:

|--build/ # webpack configuration file
|    |-- webpack.base.js
|    |-- webpack.dev.js
|    |-- webpack.prod.js
|--public/ # Home template
|    |-- index.html
|--src/
|    |-- assets/ # Static resources, such as map data of China
|    |-- components/ # Project components
|    |       |--  foo.js
|    |       |--  bar.js
|    |-- icon/ # Font Icon
|    |-- images/ # Picture resources
|    |-- theme/ # Style file
|    |-- index.js # Project entry
|--.babel.js # babel configuration
|--.browserslistrc.json # Browser Support Rules
|--.gitignore 
|--package.json
|--postcss.config.js # Poscss plug-in configuration
|--README.md

Install the dependency packages.

cd footprint
npm i

Map selection

The map shows that I chose echarts. echarts official website

npm i --save echarts

application development

My core requirement is very simple, that is to show the countries, provinces and cities I have visited on the map.
First of all, we should realize the provinces in China. The logic of development is very simple.

1. Introducing echarts

On demand citation

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. Processing User Data

For series data.

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. register map

Echarts has a registerMap method, echarts. registerMap (mapName, geoJson, special Areas).

- mapName: The name of the map must be the same as the corresponding value of option - > series - > map.
- GeJson: Data in GeoJson format, see http://geojson.org/.
- Special Areas: Optional. Zooming the parts of the map to the right location can make the map display better.

geoJson is geographic information data, which is usually very large, of course, acquired asynchronously.

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

Vector map data provided by ECharts3 is no longer available for download after version 4. The interpretation of the official website is "because some data do not conform to the provisions of the National Surveying and Mapping Law". However, as long as it is not commercially available, these vector data can still be used. You can get it from me if you need it https://github.com/yc111/echa...

4. Configure option s to display maps

Other configurations after registering maps

// Specify the configuration items and data for the chart
let option = {
    color: _color,
    title: _title,
    tooltip: _tooltip,
    legend: _legend,
    visualMap: _visualMap,
    toolbox: _toolbox,
    series: series
};
// Use the configuration items and data just specified to display the chart
myChart.setOption(option);

Add Travis CI Continuous Integration

It took about a day to get the prototype ready (it felt like a lot of time was spent adjusting the color of the map...). I deployed the project on github page, but after each build, it was too cumbersome to deploy manually.

So I used Travis CI to do continuous integration for the project, and now as soon as the code is submitted, it will be deployed automatically.

For detailed configuration of Travis, you can refer to another article of mine: Continuous Integration and Automatic Deployment Using Travis CI+GitHub

Effect preview

Project Preview Address: http://champyin.com/footprint/

For the time being, it is relatively simple and supports only the provinces. In the future, I will add the world map and city map (after all, who are crossing the border, ha ha), realize the map to drill down, and optimize the user data settings, and constantly improve.

Project source address: https://github.com/yc111/foot...
Welcome to star. If you like, you can fork this project, and then create your own footprint application.

--
Welcome to reprint, reprint please indicate the source:
https://champyin.com/2019/09/...

This paper is published in the same time:
Using echarts to Show Travel Footprints