Echarts 绘制地图省、市、区、县(以及点击显示下级,支持坐标定位)


**

Echarts 绘制地图省、市、区、县(以及点击显示下级,支持坐标定位)

**

上代码

javascript 复制代码
<template>
  <div class="mapCont">
    <div id="mapSelf" @contextmenu.prevent="disableContextMenu"></div>
  </div>
</template>
  
<script>
import * as echarts from 'echarts'
import mapData from "./addressMode/xiangyang.json";//引入json数据   下载地址http://datav.aliyun.com/tools/atlas/#&lat=37.82280243352756&lng=107.4462890625&zoom=4
import maplhk from "./addressMode/老河口市.json";
export default {
  name: "HelloWorld",
  data() {
    return {
      chart: null,
      rowData: [
        { name: "谷城县", jwd: [111.659572, 32.269471], value: [111.659572, 32.269471, 12] },
        { name: "谷城县", jwd: [111.659572, 32.200471], value: [111.659572, 32.200471, 24] },
      ]
    };
  },
  mounted() {
    this.mapInit(mapData, this.rowData)

  },
  methods: {
    mapInit(modeData, rowData) {
      this.chart = echarts.init(document.getElementById("mapSelf"));
      echarts.registerMap("xiangyang", modeData); //mapData是定义的数据初始化
      this.chart.setOption({
        // legend: {//可设置多个颜色
        //   orient: 'vertical',
        //   x: 'left',
        //   data: ['蓝点', '红点']
        // },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{b}",
        // },
        geo: {//定义地图样式
          type: "map",
          map: "xiangyang",
          aspectScale: 0.75, //长宽比
          selectedMode: "single", //表示选种模式是否为单选"mutiple"表多选
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#FFFFFFcc", //文字颜色
                fontSize: 16
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "#fff", //鼠标hover文字颜色
                fontSize: 18
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#0069e5", //整个背景填充颜色
              borderColor: "#ffffff" //边界颜色
            },
            emphasis: {
              areaColor: "darkorange" //鼠标hover颜色,区域选中颜色
            }
          },
        },
        series: [
          {
            name: "蓝点",
            type: "effectScatter", //影响散点
            coordinateSystem: "geo",
            symbolSize: 12,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                color: "white",
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "white",
                shadowBlur: 10,
                shadowColor: "white" //闪烁圈的颜色
              }
            },
            data: rowData,

          },
          // {//可配置多个数据源
          //   name: "红点",
          //   type: "effectScatter", //影响散点
          //   coordinateSystem: "geo",
          //   symbolSize: 12,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke"
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       color: "red",
          //       formatter: "{b}",
          //       position: "right",
          //       show: false
          //     },
          //     emphasis: {
          //       show: true
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "red",
          //       shadowBlur: 10,
          //       shadowColor: "red" //闪烁圈的颜色
          //     }
          //   },
          //   data: [
          //     { name: "宜城市", jwd: [112.265758, 31.726944], value: [112.265758, 31.726944, 12] },
          //     { name: "枣阳市", jwd: [112.779625, 32.134729], value: [112.779625, 32.134729, 24] },
          //   ]
          // }
        ]
      });
      // 点击每个市所获取到的值,这里可进行相关操作
      this.chart.on("click", (params) => {
        console.log(params);
        if (params.name == "老河口市") {
          this.chart.dispose();
          this.mapInit(maplhk, [{ name: "老河口", jwd: [111.682704, 32.393923], value: [111.682704, 32.393923, 12] }])
        }
      });
      this.chart.on("contextmenu", (params) => {
        console.log(params);
        this.chart.dispose();
        this.mapInit(mapData, this.rowData)
      });
    },
    disableContextMenu(e) {//禁用右键显示保存图片
      e.preventDefault();
    }
  },


};
</script>
<style scoped>
.mapCont {
  width: 1000px;
  height: 800px;
}
#mapSelf {
  width: 100%;
  height: 100%;
}
</style>
相关推荐
山有木兮木有枝_15 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树29 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐34 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机1 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星1 小时前
vue实现微信聊天emoji表情
前端·javascript
停止重构1 小时前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚1 小时前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin1 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive1 小时前
原型与原型链到底是什么?
javascript
lichenyang4531 小时前
React项目(移动app)
前端