echart5.x地图下钻和地图标点(vue3+ts)

已于 2023-08-22 17:27:47 修改
阅读量382 收藏 2
点赞数
分类专栏： vue 文章标签： echarts vue.js
于 2023-08-22 17:25:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43217258/article/details/132432086
版权

地图下钻的独立组件，引入即用
在echart地图上踩了太多坑了，记录下吧

使用：

<CityMap :list="mapList" @params="changeParams" />

// 地图标点
let mapList = [
  {
    FarmID: "337207bb-5abe-42ea-949c-e034a3ae6377",
    FarmName: "优然牧场一场",
    Long: 119.23944,
    Lati: 34.324724,
    Admin: "小王",
    Tel: "",
    Livestock: 7660,
    Address: "",
  },
];
let changeParams = (val: any) => {
  console.log("地图会传的数据：", val);
};

组件代码：

<template>
  <div class="cityMap">
    <div class="backMap" :class="{ notAllowed: !notAllowed }" @click="backMap">
      <span>返回</span>
    </div>
    <div class="tradeIn-cattle-map" ref="echartsRef"></div>
  </div>
</template>

<script setup lang="ts">
/**
 * 省市区-地图下钻
 */
import * as echarts from "echarts";
import {
  ref,
  onMounted,
  reactive,
  Ref,
  onUnmounted,
  nextTick,
  watch,
} from "vue";
import axios from "axios";
import { mapScatter } from "@/utils/youran";
// 本地测试用的地图json数据
const mapDatas = require("./320700_full.json");
const mapDatas2 = require("./320723.json");
const echartsRef: Ref = ref(null);

let notAllowed = ref<Boolean>(false);

let timeFn: any = null;

let myChart: any = null;

// 所有地图
let AllMap = reactive([
  {
    prefix: "",
    adcode: "",
    name: "",
  },
]);

onMounted(() => {
  initChart();
});

onUnmounted(() => {});

// 获取地图--和域名一样的地图（上线上上去，防跨域）
function GetMapGeoJson(cityCN: string, citylevel: string) {
  var uploadedDataURL = "";
  if (citylevel == "china") {
    //全国地图
    return "/YooHooMIS/Scripts/echarts/china/100000_full.json";
  }
  if (citylevel != "district" && (cityCN + "").substring(4) != "00")
    citylevel = "district";
  if (citylevel == "district") {
    uploadedDataURL =
      "/YooHooMIS/Scripts/echarts/china/district/" +
      cityCN +
      ".json";
  } else if (citylevel == "city") {
    uploadedDataURL =
      "/YooHooMIS/Scripts/echarts/china/city/" +
      cityCN +
      "_full.json";
  } else {
    uploadedDataURL =
      "/YooHooMIS/Scripts/echarts/china/province/" +
      cityCN +
      "_full.json";
  }
  return uploadedDataURL;
}

// 地图2--阿里云地图
function GetMapGeoJson2(cityCN: string, citylevel: string) {
  var uploadedDataURL = "";
  if (citylevel == "china") {
    //全国地图
    return "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json";
  }
  if (citylevel != "district" && (cityCN + "").substring(4) != "00")
    citylevel = "district";
  if (citylevel == "district") {
    uploadedDataURL =
      "https://geo.datav.aliyun.com/areas_v3/bound/" + cityCN + ".json";
  } else if (citylevel == "city") {
    uploadedDataURL =
      "https://geo.datav.aliyun.com/areas_v3/bound/" + cityCN + "_full.json";
  } else {
    uploadedDataURL =
      "https://geo.datav.aliyun.com/areas_v3/bound/" + cityCN + "_full.json";
  }
  return uploadedDataURL;
}

// 向外传值
const emit = defineEmits(["params"]);

function returnParams(params: object) {
  emit("params", params);
}

const props = defineProps({
  funType: {
    type: Object,
    default: {},
  },
  list: {
    type: Array,
    default: [],
  },
});

//各省份的数据--本地图是标点图，所以不需要了，废弃了这里
let allData: any = reactive([]);
function initMapData() {
  // Api.getMapData({
  //   funType: props.funType.module,
  //   mapData: JSON.stringify(AllMap),
  //   range: props.funType.range,
  // }).then((res) => {
  // allData.length = 0;
  // allData.push(
  //   ...[
  //     {
  //       prefix: "district",
  //       adcode: "320703",
  //       name: "连云区",
  //       value: "0",
  //     },
  //     {
  //       prefix: "district",
  //       adcode: "320707",
  //       name: "赣榆区",
  //       value: "0",
  //     },
  //     {
  //       prefix: "district",
  //       adcode: "320722",
  //       name: "东海县",
  //       value: "0",
  //     },
  //     {
  //       prefix: "district",
  //       adcode: "320706",
  //       name: "海州区",
  //       value: "0",
  //     },
  //     {
  //       prefix: "district",
  //       adcode: "320723",
  //       name: "灌云县",
  //       value: "0",
  //     },
  //     {
  //       prefix: "district",
  //       adcode: "320724",
  //       name: "灌南县",
  //       value: "0",
  //     },
  //   ]
  // );
  // console.log("AllMap", AllMap);
  // console.log("各省份的数据allData", allData);

  setTimeout(() => {
    setOption();
  }, 1);
  // });
}

watch(
  [() => props, AllMap],
  (val, val2) => {
    initMapData();
  },
  {
    deep: true,
  }
);

// 激活地图栈

// 当前激活地图
let defaultMap = reactive({
  prefix: "",
  adcode: "",
  name: "",
});

//  初始化地图
initData();

function initData() {
  defaultMap = {
    prefix: "city",
    adcode: "320700",
    name: "连云港市",
  };
}

/**
 获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
 @params {String} mapCode:json数据的地址
 @params {String} name: 地图名称
 */
let mapStack: any[] = [];

function loadMap() {
  if (mapStack.length == 0) {
    mapStack.push(defaultMap);
  }
  let mapData = GetMapGeoJson2("320700", "city") || mapDatas;

  if (mapStack.length > 1) {
    mapData = GetMapGeoJson2(
      mapStack[mapStack.length - 1].adcode,
      mapStack[mapStack.length - 1].prefix
    );
  }
  AllMap = [
    {
      prefix: "district",
      adcode: "320703",
      name: "连云区",
    },
    {
      prefix: "district",
      adcode: "320707",
      name: "赣榆区",
    },
    {
      prefix: "district",
      adcode: "320722",
      name: "东海县",
    },
    {
      prefix: "district",
      adcode: "320706",
      name: "海州区",
    },
    {
      prefix: "district",
      adcode: "320723",
      name: "灌云县",
    },
    {
      prefix: "district",
      adcode: "320724",
      name: "灌南县",
    },
  ];
  // 注册当前激活地图
  // console.log("激活地图", mapStack[mapStack.length - 1].name, mapData);
  axios.get(mapData).then((geoJson: any) => {
    echarts.registerMap(mapStack[mapStack.length - 1].name, geoJson.data);
    nextTick(() => {
      setOption();
    });
  });
}

function setOption() {
  let option = {
    tooltip: {
      show: true,
      className: "CityMapChartTooltipBg",
      formatter: (params: any) => {
        if (params.componentSubType === "scatter") return params.name;
      },
    },
    geo: {
      map: mapStack[mapStack.length - 1].name || "连云港市",
      itemStyle: {
        normal: {
          areaColor: `#10359b`,
          borderColor: `#fff`,
          borderWidth: 1,
          shadowColor: `#94d9ff`,
          shadowOffsetX: -4,
          shadowOffsetY: 8,
          shadowBlur: 1,
        },
        emphasis: {
          label: {
            show: false,
          },
        },
      },
    },
    xAxis: [],
    yAxis: [],
    series: [
      {
        name: "MAP",
        type: "map",
        map: mapStack[mapStack.length - 1].name || "连云港市",
        selectedMode: "false", //是否允许选中多个区域
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 16,
              fontFamily: "SourceHanSansCN",
            },
          },
        },

        itemStyle: {
          areaColor: "#0f18c2",
          borderColor: "#6becf5",
          borderWidth: 1.5,
          emphasis: {
            show: true,
            areaColor: "#55ade8", // 鼠标悬浮地图面的颜色
            shadowColor: "#94d9ff",
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 5,
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 16,
                fontFamily: "SourceHanSansCN",
              },
            },
          },
        },
        // data: allData,//各省的数据，鼠标放上显示，现在是标点图所以不显示
      },
    ],
  };
  addScatter(option);
  myChart.setOption(option);
}
// 加牧场坐标点
function addScatter(option: any) {
  let dataList: any = [];
  if (props.list.length > 0) {
    props.list.forEach((item: any) => {
      let name = `
      <div class="CityMapChartTooltipBgBox">
        <div class="list">
          <div class="item">
            <span>${item.FarmName || ""}：</span>
            <span>${item.Livestock || 0}头</span>
          </div>
          <div class="item">
            <span>负责人：</span>
            <span>${item.Admin || ""}</span>
          </div>
          <div class="item">
            <span>地址：</span>
            <span>${item.address || ""}</span>
          </div>
        </div>
      </div>
    `;
      dataList.push({
        name: name,
        value: [item.Long, item.Lati],
      });
    });
  }
  option.series.push({
    type: "scatter",
    coordinateSystem: "geo",
    symbol: "image://" + mapScatter,
    symbolSize: [66, 36],
    itemStyle: {
      normal: {
        color: "#1cedd4",
        shadowBlur: 10,
        shadowColor: "#333",
      },
    },
    zlevel: 2,
    data: dataList,
  });
}

let initChart = () => {
  if (!myChart) {
    myChart = echarts.init(echartsRef.value);
  }
  loadMap();

  //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
  myChart.on("click", (params: any) => {
    notAllowed.value = true;
    clearTimeout(timeFn);
    //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
    timeFn = setTimeout(() => {
      let clickMap = AllMap.find((item) => item.name == params.name);
      // if (!clickMap) {
      //   alert("无此区域地图显示");
      //   return;
      // }
      // 向外传参
      returnParams(clickMap || {});
      // 只存3级
      if (mapStack.length < 3) {
        mapStack.push(clickMap);
      }
      loadMap();
    }, 250);
  });

  // 绑定双击事件，返回全国地图
  myChart.on("dblclick", (params: any) => {
    //当双击事件发生时，清除单击事件，仅响应双击事件
    clearTimeout(timeFn);

    // 以防初始化双击丢栈
    if (mapStack.length > 1) {
      mapStack.pop();
    }
    let res = mapStack[mapStack.length - 1];
    //返回参数
    returnParams(res);
    loadMap();
  });
};

let backMap = () => {
  notAllowed.value = false; //鼠标放上去的禁用状态
  //当双击事件发生时，清除单击事件，仅响应双击事件
  clearTimeout(timeFn);

  // 取当前默认地图
  returnParams(defaultMap);
  mapStack.length = 0;
  // 地图栈  最后一个
  loadMap();
};
</script>

<style lang="less" scoped>
.cityMap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .backMap {
    position: absolute;
    top: 0;
    left: 40px;
    border: none;
    z-index: 9;

    span {
      display: block;
      font-size: 12px;
      border-radius: 7px;
      background-color: #06bcec;
      padding: 4px 6px;
      color: #fff;
      cursor: pointer;
    }

    &:focus {
      outline: none;
    }

    &:hover {
      background-size: 100% 100%;

      span {
        color: #ffffff;
      }
    }

    &.notAllowed {
      cursor: not-allowed;
    }
  }

  .tradeIn-cattle-map {
    width: 90%;
    height: 90%;
  }
}
</style>

效果图：

在这里插入图片描述

在这里插入图片描述

小旋风01234
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echart省市区地图下钻
04-10
echart官方例子源码，从省份下钻到地市再到区县，很好的一个资源
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Flutter百度地图定位插件与地理围栏插件冲突问题
wangzhongITger的博客
09-06 889
针对这个问题，应该是百度sdk内部的组件没销毁之类的所致吧，毕竟用的是百度sdk的官方组件，深究下去意义不大，我的处理方法是给定位组件单独设置了一个透明的loading页面，展示定位中的动画，当获取经纬度成功后关闭当前loading页面并跳转至地图页面画下地理围栏，相当于是三个页面间的交互，至于页面值的回传因为多了一个已经关闭的loading页面，所以通过flutter自带的api是无法直接传回来了，所以这里使用了event_bus组件将选好的地点信息返回到之前的页面。以上就是个人的解决思路。
echarts地图功能（geojson获取数据、渐变色、地区名字标点、点击空白区域取消选中）
最新发布
JackChan
04-18 115
echarts地图功能（geojson获取数据、渐变色、地区名字标点、点击空白区域取消选中）
echarts实现地图下钻
热门推荐
qq_23447231的博客
12-14 1万+
公司的新项目需要写这样的地图，还要能两级下钻到省，下面是我写好了的样子，我今天就是复一下盘： 如何用echarts显示地图 首先需要下载map的Json数据，我放到这里：mapJson 然后使用echarts的geo配置，或者series的type = 'map’就可以加载地图了： import chinaMapJson from "./china.json" echarts.registerMap('china', chinaMapJson) var options = { tooltip:{
echarts中应用中国地图并前往指定的下钻
slom_fxt的博客
09-22 1000
echarts中应用中国地图并前往指定的下钻
echarts地图下钻
Xiang_Gong_Ya_的博客
03-31 555
init() { // 获取地图数据接口 getChart({ address: "浙江省", }).then((res) => { this.mapData = res.regionDetailList; // 处理接口数据 返回name value this.mapData = this.mapData.map((item, index) => { return { ...
中国地图 vue+echart5.x
06-15
中国地图 vue+echart5.x
echarts地图：全球+全国+省级，可下钻层级
07-21
使用echarts来显示世界地图和全国地图，并且可以下钻层级 适用于使用echarts+vue3.0+vite的人员 解决全球下钻到全国到省级的问题 以及不要的地图资源
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
vue3.x+vite+ts+vue-router@4.x 路由使用demo，可供学习使用，也可在此基础上写项目
echart map 省市地图 可下钻.
08-07
亲测可以用! echart 搭配百度api地图. 默认展示全国地图以及各个城市所拥有的资源,资源按大小圆展示. 文件tar.gz后缀,在window界面用解压工具如bandizip直接解压.
echarts地图下钻下载
08-02
echart地图下钻 ，由全国地图下钻到某省地图， 下载后解压即可
echarts地图下钻，实现思路
11-08
全国地图下钻到省市，只要有详细地图数据自己改一下就可以都区县，乡级。github可以找一下。
echarts地图下钻功能demo
11-02
echarts地图下钻功能demo，各地市功能。全国信息。下载打开html可查看。
echart省市区三级地图下钻
12-01
echart省市区三级地图下钻 包含完整的演示代码，单独页面下钻，以及跳转页面。资源包括完整的省市区JS文件和JSON文件
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
[小O地图-数据] 下载世界范围的OSM地图数据
gis9的专栏
11-04 1821
【概述】 小O地图是互联网专业地图数据软件，致力为广大科研人员提供专业地图数据，用于科研及学习。 OSM是OpenStreetMap的缩写，OSM是全球最大的互联网在线地图网站，提供世界范围的地图数据浏览及下载服务，数据由用户自上报方式更新，具有覆盖范围广、更新及时等特点，可以免费使用。OSM默认提供的数据格式为PBF格式，在一些专业GIS软件上应用不方便，为了解决用于使用PBF不变的问题，小O地图研发者新推出了【OSM矢量数据任务】，目的是提供一站式OSM地图数据下载、转换的功能，为用户提升工作...
vue3+ts+echarts5基本地图下钻~
liutianxiao123的博客
06-02 956
/ 获取地图点击区域的名字，根据名字请求本地地图Json。// 使用setOption方法将地图重置为点击的市区。// 记录当前的区域，返回上地图的标识。// 重新生成地图的Json数据。新疆维吾尔自治区: 'xinjiang',香港特别行政区: 'xianggang',// 生成地图并使用本地Json地图数据。宁夏回族自治区: 'ningxia',广西壮族自治区: 'guangxi',广东省: 'guangdong',澳门特别行政区: 'aomen',重庆市: 'chongqing',
vue3+echarts+ts 地图
08-16
你可以使用 Vue 3、Echarts 和 TypeScript 来创建一个地图应用。首先，确保你已经安装了 Vue 3 和 Echarts，并且已经创建了一个 Vue 3 项目。 1. 在你的 Vue 3 项目中，创建一个新的组件，比如 Map.vue。 2. 在 Map.vue 中，导入所需的模块和组件： ```javascript <template> <div> <div ref="mapContainer" style="width: 100%; height: 500px;"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted } from 'vue'; import * as echarts from 'echarts'; export default defineComponent({ name: 'Map', setup() { onMounted(() => { // 在组件挂载后执行初始化地图的操作 this.initMap(); }); const initMap = () => { // 创建地图实例 const mapContainer = this.$refs.mapContainer as HTMLDivElement; const mapChart = echarts.init(mapContainer); // 设置地图配置项和数据 const option = { series: [ { type: 'map', map: 'world', // 地图类型 }, ], }; // 使用配置项和数据渲染地图 mapChart.setOption(option);

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值