preface

I have always had a dream to travel around the world, to travel around countries, experience the human civilization of different countries, explore mountains and rivers, and experience the great fortune of the creator nature. After all, life is not only the casual, there are poems and distant. Over the years, I have walked through a number of places, each place, let me get closer to my dream. Although I know that compared with traveling around the world, still do not know how many mountains, but I have been working hard towards this dream, close to. I hope one day, I can smile and say to myself, you did it!

My love for maps has been buried deep in my heart ever since I was introduced to map app development for work six years ago. In the middle of this year, I took my parents on a trip to some places I had never been to before. I really want to have a map that I can light up and record the new “territories” I have visited. I searched the existing map applications on the market, but they are not what I want. The only one that meets my needs is a small function in Baidu Travel, called Footprint Map. However, it seems that the maintenance has been stopped long ago, and the data stays in 2016…

If you can’t find the right tool, build it yourself. Yeah, why not develop your own? No sooner said than done.

Engineering structures,

Firstly, cyT-CLI was used to quickly build the project framework. Cyt – cli address

Cyt-cli is a scaffolding for creating front-end projects quickly. It has a complete Webpack4 configuration and currently supports pure JS, Vue, React and other languages. NPM I -g cyt-cli NPM I -g cyt-cli

Cyt -cli Create footprint stocking template... ? Please choose a template to create roject (Use arrow keys) ❯ swan-template swan-vue-template swan-react-templateCopy the code

Because you want to make a prototype quickly, use the simplest template you can, and choose the first swan-template. Wait a while, and the project will be built. Generated project directory:

|--build/ # webPack configuration file
|    |-- webpack.base.js
|    |-- webpack.dev.js
|    |-- webpack.prod.js
|--public/ # Home page template
|    |-- index.html
|--src/
|    |-- assets/ Static resources, such as China map data
|    |-- components/ # Project Components
|    |       |--  foo.js
|    |       |--  bar.js
|    |-- icon/ # font icon
|    |-- images/ # Image resources
|    |-- theme/ # style file
|    |-- index.js # Project entry
|--.babel.js # Babel configuration
|--.browserslistrc.json # Browser support rules
|--.gitignore 
|--package.json
|--postcss.config.js # PostCSS plugin configuration
|--README.md
Copy the code

Install the dependency packages.

cd footprint
npm i
Copy the code

Map selection

I chose Echarts for the map display. Echarts website

npm i --save echarts
Copy the code

Application development

My core requirement is simple: I can show the countries, provinces and cities I have visited on a map. The logic of development is simple:

1. The introduction ofecharts

On-demand reference

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';
Copy the code

2. Process user data

Data for series.

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);
Copy the code

Register 3.map

Echarts has a registerMap method, echarts. RegisterMap (mapName, geoJson, specialAreas).

- mapName: indicates the map name. The value must be the same as that of option->series->map. - geoJson: data in geoJson format. For details, see http://geojson.org/. - specialAreas: Optional. Zooming parts of a map into place makes the entire map look better.Copy the code

GeoJson is geographic information data, which is typically large, and is of course retrieved asynchronously.

util.get('assets/china.json').then(data => {
    letchinaJson = data; myChart.hideLoading(); Echarts.registermap (mapName, chinaJson, {})})Copy the code

Vector map data provided by ECharts3 is no longer available for download after version 4. The official website explained that “some data do not conform to the provisions of the national surveying and mapping Law”. However, the vector data can be used as long as it is not commercially available. If you need it, you can go to github.com/yc111/echar…

4. Configure Option to display the map

Other configurations are performed after the map is registered

// Specify the chart configuration items and dataletoption = { color: _color, title: _title, tooltip: _tooltip, legend: _legend, visualMap: _visualMap, toolbox: _toolbox, series: series }; // Display the graph mychart.setoption (option) with the configuration item and data just specified;Copy the code

Add Travis CI continuous integration

It took about a day to get the prototype ready. . I deployed the project on github page, but after each build, I had to manually deploy it, which was too troublesome.

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

For details on Travis configuration, refer to my other article: Continuous integration and automated deployment using Travis CI+GitHub

Results the preview

Project preview address: champyin.com/footprint/

Project source code address: github.com/yc111/footp…

Welcome to star. If you like, fork this project and build your own footprinting app.

—

Welcome to reprint, reprint please indicate the source: champyin.com/2019/09/27/…