vue 地图渲染（map） + 特殊定位（markPoint）

• 近期接到需求是：无限向下联动的地图，从浙江省联动到杭州市及下级县等，并且要标记个别特殊位置。
• 此案例主要是对基础的静态地图渲染进行记录，后期会更新联动下级的案例。
• 此案例作为项目实现记录，以免后期遗忘。

静态地图完成图

GeoChart.vue

第一步：下载geoJson数据

• 本次案例参考了HashTang 这位博主的 https://www.jianshu.com/p/c293c94d9ab7，完成了一版Vue版本 的echarts使用。
• geoJson下载地址为 https://hxkj.vip/demo/echartsMap/ ,下载完后导入到我们的模块中
• 侵权即删！！！！

 import echarts from 'echarts';
  import zjs from './../geoData/330000.json'; //浙江省
  import hz from './../geoData/330100.json'; //杭州市
  import nb from './../geoData/330200.json'; //宁波市
  import wz from './../geoData/330300.json'; //温州市
  import jx from './../geoData/330400.json'; //嘉兴市
  import huz from './../geoData/330500.json'; //湖州市
  import sx from './../geoData/330600.json'; //绍兴市
  import jh from './../geoData/330700.json'; //金华市
  import qz from './../geoData/330800.json'; //衢州市
  import zs from './../geoData/330900.json'; //舟山市
  import tz from './../geoData/331000.json'; //台州市
  import ls from './../geoData/331100.json'; //丽水市
  require('echarts/theme/macarons') // echarts 主题

第二步：渲染地图（主要部分）

   initChart() {
        this.chart = echarts.init(this.$el, 'macarons');//创建echart模型，并给上马卡龙色
        echarts.registerMap('zjs', zjs);  //关键点！！！！引入json类型的地图
        this.chart.setOption({ //给地图增加属性
          // 添加标题
          title: {
            text: '浙江省地图',
            left: "center",
          },
          // 字体样式
          textStyle: {
            fontWeight: "bolder"
          },
          // 提示框组件
          tooltip: {
            trigger: 'item',
          },
          // 工具栏，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置等
          toolbox: {
            show: true, //是否显示工具栏组件
            orient: 'vertical', //工具栏 icon 的布局朝向
            left: 'right',
            top: 'center',
            feature: { //各工具配置项
              dataView: { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
                readOnly: false
              },
              restore: {}, //配置项还原
              saveAsImage: {}  //保存图片
            }
          },
          // 左下角颜色框设置，热力图颜色显示
          visualMap: {
            min: 10,
            max: 1000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#66FFCC', 'yellow', 'orangered'],//数据达到对象显示值，则地图上会展现
            }
          },
          // 主要部分！！！！！
          series: [{
            //数据视图中的名称
            name: '浙江省地图',
            type: 'map', //决定是什么类型的图表
            // geoJson导入匹配的模板对象
            mapType: 'zjs',
            // 是否开启鼠标缩放和平移漫游
            roam: true,
            geoIndex:0,
            itemStyle: { // 普通状态下的样式
              normal: {
                label: {
                  show: true
                },
              },
              emphasis: { // 高亮状态下的样式
                label: {
                  show: true
                },
                areaColor: "#CCABDB" //给了一个淡紫色
              }
            },
            // 定位点
            markPoint: { //数据全是markPoint
              symbolSize: 20, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
              itemStyle: {
                normal: {
                  borderColor: '#87cefa',
                  borderWidth: 1, // 标注边线线宽，单位px，默认为1
                  label: {
                    show: false
                  }
                },
                emphasis: {
                  borderColor: '#1e90ff',
                  borderWidth: 5,
                  label: {
                    show: false
                  }
                }
              },
              effect: {
                show: true,
                shadowBlur: 0
              },
              // 此数据源为定位点数据
              data: [{
                  name: "杭州职业技术学院",
                  value: 9,
                  coord: [119.88, 29.93] //必须加坐标
                },
                {
                  name: "杭州科技职业技术学院",
                  value: 9,
                  coord: [119.98, 30.3] //必须加坐标
                },
                {
                  name: "宁波市",
                  value: 12,
                  coord: [121.55, 29.91]
                },
              ],
              geoCoord: {
                "杭州市": [121.15, 31.89],
                "宁波市": [109.781327, 39.608266]
              }
            }, //end markPoint
            scaleLimit: {
              min: 0.5, //  最小缩放
              max: 2 //  最大缩放
            },
            // geoJson导入匹配的模板对象中的值匹配的name，进行赋值，颜色就会展开
            // 此数据为整个地图的色块数据值
            data: [{
                name: '杭州市',
                value: 111
              },
              {
                name: '宁波市',
                value: 444
              },
              {
                name: '温州市',
                value: 666
              },
              {
                name: '嘉兴市',
                value: 666
              },
              {
                name: '湖州市',
                value: 666
              },
              {
                name: '绍兴市',
                value: 777
              },
              {
                name: '金华市',
                value: 333
              },
              {
                name: '衢州市',
                value: 444
              },
              {
                name: '舟山市',
                value: 2222
              },
              {
                name: '台州市',
                value: 555
              },
              {
                name: '丽水市',
                value: 777
              },
            ]
          }]
        })
      }

使用GeoChart组件

<template>
  <section>
  	//:height="(fullHeight - 100)+'px'" 为动态高度，可以传固定高度，把height前面的冒号去掉
     <geo-chart :height="(fullHeight - 100)+'px'"></geo-chart>
  </section>
</template>
<script>
  import GeoChart from './components/GeoChart';
  export default {
    components: {
      GeoChart
    },
    }
</script>

Vue版本完整代码

/*
* @Author: yangjiajia
* @Date: 2020-04-23 16:12:15
* @Last Modified by: yangjiajia
* @Last Modified time: 2020-04-30 14:42:18
*/


<template>
  <div :class="className" :style="{height:height,width:width}">
  </div>
</template>

<script>
  import echarts from 'echarts';
  import zjs from './../geoData/330000.json'; //浙江省
  import hz from './../geoData/330100.json'; //杭州市
  import nb from './../geoData/330200.json'; //宁波市
  import wz from './../geoData/330300.json'; //温州市
  import jx from './../geoData/330400.json'; //嘉兴市
  import huz from './../geoData/330500.json'; //湖州市
  import sx from './../geoData/330600.json'; //绍兴市
  import jh from './../geoData/330700.json'; //金华市
  import qz from './../geoData/330800.json'; //衢州市
  import zs from './../geoData/330900.json'; //舟山市
  import tz from './../geoData/331000.json'; //台州市
  import ls from './../geoData/331100.json'; //丽水市
  require('echarts/theme/macarons') // echarts 主题
  export default {
    props: {//接收父级数据，没有则显示默认值
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '500px'
      },

    },
    data() {
      return {
        chart: null,
        zjsData: zjs
      }
    },
    mounted() {
      this.initChart();
    },
    watch: {
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');//创建echart模型，并给上马卡龙色
        echarts.registerMap('zjs', zjs);  //关键点！！！！引入json类型的地图
        this.chart.setOption({ //给地图增加属性
          // 添加标题
          title: {
            text: '浙江省地图',
            left: "center",
          },
          // 字体样式
          textStyle: {
            fontWeight: "bolder"
          },
          // 提示框组件
          tooltip: {
            trigger: 'item',
          },
          // 工具栏，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置等
          toolbox: {
            show: true, //是否显示工具栏组件
            orient: 'vertical', //工具栏 icon 的布局朝向
            left: 'right',
            top: 'center',
            feature: { //各工具配置项
              dataView: { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
                readOnly: false
              },
              restore: {}, //配置项还原
              saveAsImage: {}  //保存图片
            }
          },
          // 左下角颜色框设置，热力图颜色显示
          visualMap: {
            min: 10,
            max: 1000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#66FFCC', 'yellow', 'orangered'],//数据达到对象显示值，则地图上会展现
            }
          },
          // 主要部分！！！！！
          series: [{
            //数据视图中的名称
            name: '浙江省地图',
            type: 'map', //决定是什么类型的图表
            // geoJson导入匹配的模板对象
            mapType: 'zjs',
            // 是否开启鼠标缩放和平移漫游
            roam: true,
            geoIndex:0,
            itemStyle: { // 普通状态下的样式
              normal: {
                label: {
                  show: true
                },
              },
              emphasis: { // 高亮状态下的样式
                label: {
                  show: true
                },
                areaColor: "#CCABDB" //给了一个淡紫色
              }
            },
            // 定位点
            markPoint: { //数据全是markPoint
              symbolSize: 20, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
              itemStyle: {
                normal: {
                  borderColor: '#87cefa',
                  borderWidth: 1, // 标注边线线宽，单位px，默认为1
                  label: {
                    show: false
                  }
                },
                emphasis: {
                  borderColor: '#1e90ff',
                  borderWidth: 5,
                  label: {
                    show: false
                  }
                }
              },
              effect: {
                show: true,
                shadowBlur: 0
              },
              // 此数据源为定位点数据
              data: [{
                  name: "杭州职业技术学院",
                  value: 9,
                  coord: [119.88, 29.93] //必须加坐标
                },
                {
                  name: "杭州科技职业技术学院",
                  value: 9,
                  coord: [119.98, 30.3] //必须加坐标
                },
                {
                  name: "宁波市",
                  value: 12,
                  coord: [121.55, 29.91]
                },
              ],
              geoCoord: {
                "杭州市": [121.15, 31.89],
                "宁波市": [109.781327, 39.608266]
              }
            }, //end markPoint
            scaleLimit: {
              min: 0.5, //  最小缩放
              max: 2 //  最大缩放
            },
            // geoJson导入匹配的模板对象中的值匹配的name，进行赋值，颜色就会展开
            // 此数据为整个地图的色块数据值
            data: [{
                name: '杭州市',
                value: 111
              },
              {
                name: '宁波市',
                value: 444
              },
              {
                name: '温州市',
                value: 666
              },
              {
                name: '嘉兴市',
                value: 666
              },
              {
                name: '湖州市',
                value: 666
              },
              {
                name: '绍兴市',
                value: 777
              },
              {
                name: '金华市',
                value: 333
              },
              {
                name: '衢州市',
                value: 444
              },
              {
                name: '舟山市',
                value: 2222
              },
              {
                name: '台州市',
                value: 555
              },
              {
                name: '丽水市',
                value: 777
              },
            ]
          }]
        })
      }
    }
  }

</script>