关于Vue+ECharts 地图引用空间文件或GIS(.shp)

效果图：

直接步入主题

GIS 能够让你查看这个 .shp 文件的地图内容，但是我感觉用不用都可以，反正我是没用，因为他在合并的时候我不是很理解，毕竟太过跨越了；

关于引用空间文件

1.首先你需要得到一些 .shp 文件，当然是越轻量级越好；

2.你需要将你得到的空间文件在 https://mapshaper.org/ 这个网站进行转化为geoJSON ；

3.你转换的是geoJSON 但是到手的确实JSON文件，这个不用慌，就是这么的无厘头；

4.如果你得到的是一个JSON文件当然最好，如果是多个你就需要合并了，就像我是的安装了很多插件，但是最后都没成，还是自己手动的合成了一下，但好在不是很多，我只有三个，简单地看了一下应该是 （点、线、面）凑成的三个JSON文件；

5.你得到这个JSON文件你成功了三分之二，剩下的就是echarts的 *** 作了，以上的一些步骤卡了我2天时间，毕竟比较菜鸡，叶很水，当然你看见了我这个文章你就乐吧，稳稳地能帮你把这个需求搞定；

以下是ECharts的 *** 作了

1.你需要将你得到的JSON文件放到你的项目文件中以便引入；

这是一个引入外部JSON文件 在ECharts中有过案例；

把这个写上，这个也是官网的案例；

以上就是我的实现经历 如果大家有更方便的办法请联系我或评论哦 （在将几个JSON文件合并时感觉好尴尬）

1.引入 import China from '@/utils/echarts/china-map-geojson.min'

2.引入import '@/utils/echarts/sichuan'

 3.this.$echarts.registerMap('china', China.ChinaData)

 const geoCoordMap = {

      甘孜藏族自治州: [99.9207, 31.0803],

      阿坝藏族羌族自治州: [102.4805, 32.4536],

      凉山彝族自治州: [101.9641, 27.6746],

      凉山彝族自治州1: [102.1111, 28.6746],

      绵阳市: [104.7327, 31.8713],

      达州市: [107.6111, 31.333],

      广元市: [105.6885, 32.2284],

      雅安市: [102.6672, 29.8938],

      宜宾市: [104.6558, 28.548],

      乐山市: [103.5791, 29.1742],

      南充市: [106.2048, 31.1517],

      巴中市: [107.0618, 31.9977],

      泸州市: [105.4578, 28.493],

      成都市: [103.9526, 30.7617],

      资阳市: [104.9744, 30.1575],

      攀枝花市: [101.6895, 26.7133],

      眉山市: [103.8098, 30.0146],

      广安市: [106.6333, 30.4376],

      德阳市: [104.48, 31.1133],

      内江市: [104.8535, 29.6136],

      遂宁市: [105.5347, 30.6683],

      自贡市: [104.6667, 29.2786]

    }

    const mapData = [

 { name: '资阳市', value: 5 },

  { name: '乐山市', value: 6 },

  { name: '成都市', value: 7 },

  { name: '雅安市', value: 9 },

  { name: '阿坝藏族羌族自治州', value: 10 },

  { name: '凉山彝族自治州', value: 11 },

  { name: '凉山彝族自治州1', value: 12 }

    ]

    const convertData = function(data) {

      var res = []

      for (var i = 0 i < data.length i++) {

        var geoCoord = geoCoordMap[data[i].name]

        if (geoCoord) {

          res.push({

            name: data[i].name,

            value: geoCoord.concat(data[i].value),

            selected: true //点击事件

          })

        }

      }

      return res

    }

    const option = {

      geo: {

        map: '四川',

        itemStyle: {

          areaColor: '#e8f5fe',

          borderColor: '#1c85f6'

        },

        emphasis: {

          itemStyle: {

            areaColor: 'lightblue',

            shadowColor: '#fff',

            shadowBlur: 10

          },

          label: {

            show: false

          }

        }

      },

      series: [

        {

          name: '666',

          type: 'scatter',

          coordinateSystem: 'geo',

          symbol: 'pin',

          symbolSize: [20, 20],

          label: {

            normal: {

              show: true,

              textStyle: {

                color: '#2cdee5',

                fontSize: 12

              },

              position: 'bottom',

              formatter(value) {

                return value.data.value[2]

              }

            }

          },

          itemStyle: {

            normal: {

              color: '#2cdee5'

            }

          },

          data: convertData(

            mapData

          ),

          showEffectOn: 'render',

          rippleEffect: {

            brushType: 'stroke'

          },

          hoverAnimation: true,

          zlevel: 1

        }

      ]

    }

效果图:

要定义require

require('echarts/util/mapData/params').params.USA = {

getGeoJson: function (callback) {

$.getJSON('geoJson/USA_geo.json', callback)

},

---