Recently, the company needed to make a big data visualization page. Arcgis was originally intended to be used for the map, but the overall style of arcGIS3.x page was inconsistent with the visualization page, so we studied the loading map of Echarts, but it required the functions of clicking down and filtering to load the map. It would be too much trouble to download all the cities, counties and districts; So the choice here is to use aMap to get geoJson for administrative boundaries

Prerequisite: First, you need to apply for the key on autonavi API, which is free and can send 5000 requests a day. If you have too many requests, you need to pay to apply for the enterprise version

1. Vue loads the Amap

Open index.html and introduce AMAP and mapUI

< script SRC = "https://webapi.amap.com/maps?v=1.3&key= you applied key&plugin = AMap. DistrictSearch '> < / script > < script SRC = "https://webapi.amap.com/ui/1.0/main.js" > < / script >Copy the code

2. Specific method of obtaining administrative geoJson

Because we’re loading with echarts, we’re just using the autonavi API method to get the district geoJson from the DistrictExplorer of the AMapUI component library

AMapUI.loadUI(['geo/DistrictExplorer'], Var DistrictExplorer = new DistrictExplorer(); var DistrictExplorer = new DistrictExplorer(); var adcode = 100000; / / the country districts encoding districtExplorer. LoadAreaNode (adcode, function (error, areaNode) {if (error) {the console. The error (error); return; } let mapJson={} //geoJson must be in this format mapjson.features = Areanode.getSubfeatures ()}); });Copy the code

3. Load the map using Echarts

Echarts loading maps can be roughly divided into four types: thermal map, scatter map, distribution map and route map, but they are almost the same

Public method encapsulation:

SearchCity (AdCode){AMapUI. LoadUI (['geo/DistrictExplorer'], DistrictExplorer => { var districtExplorer = new DistrictExplorer() districtExplorer.loadAreaNode(adcode, (error, areaNode) => { if (error) { console.error(error); return; } mapjson.features = areanode.getSubfeatures () this.geojsondata = mapJson The geoJson of the county can only be obtained from the city. GetMapData ()})} This.getmapData ()})} This.getmapData ()})}Copy the code

I’ve encapsulated the method of obtaining Gaud here

/** * Adcode (if you click on the county, Export function getGeoJson(adcode,countyCode= ""){return new Promise((resolve,reject)=>{ AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => { var districtExplorer = new DistrictExplorer() districtExplorer.loadAreaNode(adcode, (error, areaNode) => { if (error) { console.error(error); reject(error) return; } let mapJson={features:{}} let Json= areanode.getSubfeatures () If (countyCode){Json= json.filter (item=>item.properties.adcode == countyCode)} mapjson.features =Json resolve(mapJson) }) }) }) }Copy the code

Inside the page: Let it in first

And then:

getGeoJson(10000).then(data=>{

}).catch(error=>{

})
Copy the code

This will get you the geoJson data

1. The distribution of

We’ve got the map geoJson, and now we need to get the data. Different maps need different map data formats

Something like this:

The required data format looks like this:

GetMapData (){getMapData(){getMapData(){getMapData(){getMapData(){ // In addition to name and value, other names can be arbitrarily selected // Distribution map does not need coordinates to achieve, Let mapData = this.geojsondata.map (item => {return ({name: item.properties. Name, value: Math.random() * 1000, level: item.properties.level, cityCode: item.properties.adcode }) }) this.initEchartsMap() }Copy the code

In view of a lot of people ask me how to deal with the data returned from the background, here separately write down the processing of obtaining background data

Data :[{area:' hubei ', sum:75, cityCode: XXXX, level: XXXX},{area:' Hunan ', sum:78, cityCode:xxxx, Level: XXXX}] that we will handle the getMapData () {getData (). Then (res = > {const data = res. Data | | [] / / the data is the data above This. mapData=data.map(item=>{name:item.area, value:item.sum, cityCode:item.cityCode, level:item.level}) This. InitEchartMap ()})} if you call the echarts method from inside the callback interface, the echarts data written outside will not render.Copy the code

And if your background happens to return this format:

Data :[{name:' hubei ', vaule:35, level: XXXX, cityCode: XXXX},{name:' Hunan ', vaule:75, level: XXXX, cityCode: XXXX}]]Copy the code

So congratulations, you don’t have to do anything, just get the data and call render echarts

When the map is rendered, give the backstage a thumbs up. It’s great

GetMapData () {getData (). Then (res = > {this. MapData = res. Data | | [] this. InitEchartMap ()})} ps: MapData {name:' XXX ',vaule:' XXX '} {name:' XXX ',vaule:' XXX '}} {name:' XXX ',vaule:' XXX '}} {name:' XXX ',vaule:' XXX '}} {name:' XXX ',vaule:' XXX '}Copy the code

Render map:

<template> <div class="map" ref="scatterMap" style="height:100%; </template> echartsmap (){this.mychart = echarts.init(this.$refs.scattermap); GeoJson echarts.registerMap('myMap', This.mychart.setoption ({tooltip: {trigger: "item", formatter: P => {// Let val = p.value; if (window.isNaN(val)) { val = 0; } let txtCon = p.name + "<br>" + "value:" + val.tofixed (2); return txtCon; }}, title: {show: true, left: "center", top: "15", text:" distribution ", textStyle: {color: "# FFF ", fontSize: DataView: {dataView: {show: false,}, magicType: {show: False,}, restore: {show: false}, saveAsImage: {show: true, name:" map ", pixelRatio: 2}}, iconStyle: {normal: BorderColor: "#41A7DE"}, itemSize: 15, Top: 20, Right: 22}, borderColor: "#41A7DE", itemSize: 15, Top: 20, Right: 22}, borderColor: "#41A7DE", itemSize: 15, Top: 20, Right: 22}, Bottom: ", icon: "circle", align: "left", splitList: [{start: 0, end: 0, label: '0 ', color: "#6ead51"}, {start: 0, end: 250, label: '0-150', color: "#92b733" }, { start: 250, end: 500, label: '250-500', color: "#c4aa29" }, { start: 500, end: 750, label: '500-750', color: "#ce6c2b"}, {start: 750, label: '750 ', color: "#c92626"}], textStyle: {color: "# 0fCCFF ", fontSize: 16}}, series: [{name: "map", type: "map", map: "myMap", roam: true, // Data: mapData, itemStyle: {normal: {show: true, areaColor: 'RGBA (0,0,0)', // Map color borderColor: 'RGB (185, 220, 227)', // borderWidth: '1', // borderWidth: '1',},}, label: {normal: {show: true, // Display the province label {color: "RGB (249, 249, 249)", // fontSize: 12}}, emphasis: {// corresponding cursor floating effect show: true, textStyle: {color:" RGB (249, 249, 249)", // "#000"}}}}]},true) // Call the method without parentheses, if the click event is triggered several times, you can first: this.mychart.off ('click'); // Unbind this.mychart. On ('click', this.clickMap)}Copy the code

** Map click event: **

// There is an argument, ClickMap (params){let cityCode = params.data.cityCode let level =param.data.level If (level = = "district") {getGeoJson (' city code ', 'county code), then (data = > {}). The catch (error = > {})} else { GetGeoJson (' city code). Then (data = > {}). The catch (error = > {})}}Copy the code

2. Scatter plot

Something like this:

   

The method of obtaining geoJson is the same as above, except for the data format requirements and rendering method

Data format requirements:

GetMapData (){getMapData(){getMapData(){getMapData(){getMapData(){getMapData(){ Let mapData = this.geojsondata.map (item => {return ({name: item.properties. Name, value: [item.properties.center[0], item.properties.center[1], index], }) }) this.initEchartsMap() }Copy the code

Render map:

InitEchartsMap (){this.mychart = echarts.init(this.$refs.dotmap){this.mychart = echarts.init(this.$refs.dotmap) Echarts.registermap ('myMap', this.geojsonData) // Set true to redraw the map, otherwise the map will fly out after drilling or filtering this.mychart.setoption ({tooltip: {trigger: "item", formatter: p => { if (window.isNaN(val)) { val = 0; } let txtCon = p.name + "<br>" + "value:" + val.tofixed (2); return txtCon; }}, title: {show: true, x: "center", y: "top", text:" hash ", textStyle: {color: "# FFF ", fontSize: DataView: {dataView: {show: false,}, magicType: {show: False,}, restore: {show: false}, saveAsImage: {show: true, name:" map ", pixelRatio: 2}}, iconStyle: {normal: {borderColor: "#41A7DE"}}, itemSize: 15, Top: 20, right: 22}, geo: {show: true, map: 'map ', // Use the roam: True, itemStyle: {normal: {show: true, areaColor: 'rgba(0,0,0,0)', borderColor: 'RGB (15, 163, 227)', borderWidth: // Emphasis is the emphasis of a graphic in a highlighted state, such as when the mouse hover or legend linkage is used. emphasis: { show: true, areaColor: '#050038', borderColor: '#83BAFF' } }, label: { normal: { show: False // Show: false}, zoom: 1.1}, series: [{name: "map ", type: "EffectScatter ", data: mapData.slice(0, -5), coordinateSystem: 'geo', // here you can set the point size symbolSize: Function (val) {return val[2] / 1.3}, showEffectOn: 'Emphasis ', 'stroke'}, hoverAnimation: true, label: {normal: {formatter: p => {return p.value[2]}, position: TextStyle: {color: '# FFF '}}, Emphasis: {show: false}}, itemStyle: {normal: {color: 'rgba(255, 128, 0,0.8)' // map point color}}, layoutCenter: LayoutSize: 430}, {name: "top5", type: "EffectScatter ", data: mapData.slice(-3), coordinateSystem: 'geo', // here you can set the point size symbolSize: Function (val) {return val[2]}, showEffectOn: 'render', // brushType: 'fill', hoverAnimation: False, label: {normal: {formatter: p => {return p.value[2]}, position: 'center', // Show: true, textStyle: { color: '#fff' } }, emphasis: { show: false } }, itemStyle: { normal: { color: 'rgba(255, 128, 0,0.8)' // map point color}}, layoutCenter: ['50%', '50%'], // Attribute defines the location of the map center on the screen, generally with layoutSize to define the map size layoutSize: 430}]},true)}Copy the code

** Click the driller function as above **

3. Heat map

Similar effects:

The data format is the same as for scatter plots

Render map:

I don’t know why the mouse hover has no information

InitEchartsMap (){this.mychart = echarts.init(this.$refs.dotmap){this.mychart = echarts.init(this.$refs.dotmap) Echarts.registermap ('myMap', this.geojsonData) // Set true to redraw the map, otherwise the map will fly out after drilling or filtering this.mychart.setoption ({tooltip: {trigger: "item",}, title: {show: true, x: "center", y: "top", text:" hot chart ", textStyle: {color: "# FFF ", fontSize: DataView: {dataView: {show: false,}, magicType: {show: False,}, restore: {show: false}, saveAsImage: {show: true, name:" map ", pixelRatio: 2}}, iconStyle: {normal: { borderColor: "#41A7DE" } }, itemSize: 15, top: 20, right: 22 }, visualMap: { show: true, left: '2%', bottom: '1%', min: 0, max: 40, text: ['40', '0'], inRange: { color: ['#41A7DE', '#eac736', '#fffc00', '#ff2600'] }, textStyle: {color: '# 0fCCff ', fontSize: 12}}, geo: {show: true, map: 'map ', // Use the roam: true, itemStyle: {normal: {show: True, areaColor: 'Racolor (0,0,0)', borderColor:' RGB (15, 163, 227)', borderWidth: '1', shadowColor: 'RGBA (63, 218, 255, 0.5)', shadowBlur: 20}, // Emphasis is the style of a graphic in a highlighted state, such as when the mouse hover or legend linkage highlights. emphasis: { show: true, areaColor: '#050038', borderColor: '#83BAFF' } }, label: { normal: { show: False // Show: false}, zoom: 1.1}, series: [{name: "map", type:" Heatmap ", data: MapData, coordinateSystem: 'geo', pointSize: 13, // Adjust the radius of the thermal map point blurSize: 15 // shadow size}]},true)}Copy the code

4. The route chart

I won’t write down the chart here. If you need it, go to Echarts

4. Echarts figure address

Address: Echarts community gallery.echartsjs.com/explore.htm… timeframe=all author=all

I have made several Echarts maps, distribution maps, scatter maps, click to drill down, thermal maps, and composite maps, all posted on Github, if necessary :github.com/biubiubiu01…

Address: preview gist006. Gitee. IO/echartsmap /…

They’re all up there. You can grab them if you need them

The resources

  • Lbs.amap.com/api/javascr… – Autonavi district access API

  • Datav.aliyun.com/tools/atlas… – All geoJson download addresses in the country

  • Gallery.echartsjs.com/editor.html… – echarts community