echarts custom draw and modify the map

Demand requirements

Need to add the administrative area of ​​Tianfu District on the map of Sichuan Province

Insert picture description here

Implement this function

Realize this function step by step
1. Get json data
2. Draw map
3. Import project

1. Obtain the map json data file

You can get it from http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
click geojson to download
Insert picture description here

2. After downloading the file (mapgeojson), draw the map in this URL http://geojson.io/#map=2/20.0/0.0

If it is a downloaded file (select file in open)
Insert picture description here

Then draw on the map. After drawing, select GeoJson in Save in the menu bar to save. After saving, modify the file name and ask json format

3. It can be used normally after being introduced into the project

// html
<div id="main" style="width: 800px;height:800px;"></div>
 // js
 var myChart = echarts.init(document.getElementById('main'));
    $.get('./mapgeo.json',function(geoJson){
    
    
      echarts.registerMap('sc',geoJson,{
    
    });
      var option = {
    
    
        tooltip: {
    
    
          trigger: 'item',
          formatter: '{b}<br/>{c} (p / km2)'
        },
        visualMap: {
    
    
          min: 500,
          max: 50000,
          text:['High','Low'],
          left: 'right',
          realtime: false,
          calculable: true,
          inRange: {
    
    
            color: ['#313695','#4575b4', '#74add1','#abd9e9','#e0f3f8']
          }
        },
        series: [
          {
    
    
            name: '西城',
            type: 'map',
            mapType: 'sc',
            aspectScale: 0.85,  //地图长度比
            label: {
    
    
              normal: {
    
    
                show: true,
                textStyle: {
    
    
                  color: '#000'
                }
              },
              emphasis: {
    
    
                show: true,
                textStyle: {
    
    
                  color: '#333'
                }
              }
            },
            data: [
              {
    
    name: '天府区', value: 5000},
            ]
          }
        ]
      };
      myChart.setOption(option);
    });

Guess you like

Origin blog.csdn.net/super__code/article/details/108377613