Echarts+vue3+高德渲染地图

news2024/11/24 15:50:47

Echarts+vue3+高德渲染地图

一：安装

npm install echarts

二：渲染地图

1. html
<template>
  <div class="content">
    <div ref="myChartsRef" id="map" style="width: 100%;height: 560px;" ></div>    
  </div>
</template>
2. 高德地图获取geo数据
//获取geo的json数据
const getGeoJson = (adcode: any) => {
  return new Promise((resolve, reject) => {
    AMapLoader.load({
      key: '*******************', // 申请好的Web端开发者Key
      version: '1.4.4',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      AMapUI: {
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
    }).then(() => {
      new AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
        var districtExplorer = new DistrictExplorer();
        districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
          if (error) {
            console.error(error);
            reject(error, 'error 191');
            return;
          }
          let Json = areaNode.getSubFeatures();
          let mapJson = {
            features: [],
          };
          mapJson.features = Json;
          resolve(mapJson);
        })
      })
    }).catch(err => {
      console.log(err)
    })
  })
}
3. echarts的基础配置项
let mapOption = {
  tooltip: {//提示框组件。
    trigger: "item",
    formatter: (p) => {
      let val = p.value;
      let txtCon =
        "<div style='text-align:left'>" +
        p.name
      "</div>";
      return txtCon;
    },
  },
  geo: [
    //geo数据
    {
      name: "SUI",
      type: "map",
      map: "SUI",
      zoom: 1.6, //当前视角的缩放比例
      center: [105.191, 36.582], // 地图中心
      roam: false, //是否开启平游或缩放
      scaleLimit: {
        //滚轮缩放的极限控制
        min: 1.4,
        max: 100,
      },
      label: {
        normal: {
          show: false,
          color: "rgb(249, 249, 249)", //省份标签字体颜色
        },
        emphasis: {
          show: true,
          color: "#fff", //鼠标放上去字体颜色
        },
      },
      itemStyle: {
        //省突起来的效果
        normal: {
          areaColor: "#1f4b77",
          borderColor: "#53D9FF",
          borderWidth: 1,
          shadowBlur: 15,
          shadowColor: "rgb(58,115,192)",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
        },
        emphasis: {
          areaColor: "#487de1",
          borderWidth: 1.6,
          shadowBlur: 25,
        },
      },
    },
  ],
  series:[]
};
4. 地图飞线

地图飞线和标记点

 {
      type: 'lines',
      zlevel: 99,
      effect: {
        show: true,
        //飞机的速度  这里是s单位
        period: 5,
        trailLength: 0.1,
        symbol: 'pin',//这是圆点替换了飞机
        // 飞机大小
        symbolSize: 5,
        color: '#31FFFF',
      },
      lineStyle: {
        normal: {
          color: '#fff',
          type: 'solid', // 虚线
          // 线条宽度
          width: 1,
          opacity: 0.1,
          curveness: 0.2, // 弯曲度
        },
        emphasis: {
          color: '#FF9600' //飞线悬浮颜色
        }
      },
      label: {
        normal: {
          show: false,
          position: 'middle',
          formatter: '{b}'
        }
      },
      data: lines_coord,//飞线数据
    },
飞线数据
lines_coord = [
  {
    coords: [
      [85.427108, 40.558036],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [96.487689, 35.972901],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [88.348773, 31.224238],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [102.748392, 30.747149],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [114.574166, 23.829568],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [115.756743, 43.502437],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [127.825623, 47.200057],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [121.455937, 31.073690],
      [116.427239, 40.246686],
    ],
  },
];
5.地图标记点
 {
      name: "地点",
      // effectScatter
      type: "scatter",
      coordinateSystem: "geo",
      zlevel: 2,
      rippleEffect: {
        brushType: "stroke",
        scale: 1.5,//涟漪大小
        period: 8,//涟漪速度
      },
      label: {
        normal: {
          show: true,
          formatter: "{b}",
          position: "right",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
      },
      emphasis: {
        interval: 1000 // 闪烁频率为每秒1次
      },
      showEffectOn: "render",
      itemStyle: {
        normal: {
          color: "#46bee9",
        },
      },
      data: coord,//标记点数据
    },
标记数据
let coord = [
  {
    name: "北京市",
    value: [116.427239, 40.246686, 1],
    symbolSize: 58, //标记点自定义图片大小
    symbol: "image://" + '图片地址（/src/images/logo.png）' //标记点自定义图片

  },
  {
    name: "新疆",
    value: [85.427108, 40.558036, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "青海省",
    value: [96.487689, 35.972901, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "西藏",
    value: [88.348773, 31.224238, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "四川省",
    value: [102.748392, 30.747149, 1],
    symbolSize: 38,
    symbol: "image://" +'图片地址（/src/images/logo.png）'
  },
  {
    name: "广东省",
    value: [114.574166, 23.829568, 1],
    symbolSize: 38,
    symbol: "image://" +'图片地址（/src/images/logo.png）'
  },
  {
    name: "内蒙古",
    value: [115.756743, 43.502437, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "黑龙江",
    value: [127.825623, 47.200057, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "上海市",
    value: [121.455937, 31.073690, 1],
    symbolSize: 38,
    symbol: "image://" +'图片地址（/src/images/logo.png）'
  },
];
6. 点击地图板块弹框设置背景图片

在这里插入图片描述

let mapOption = {
  tooltip: {
    extraCssText: 'max-width:270px; white-space:pre-wrap',
    enterable: true,//鼠标是否可进入提示框浮层中，默认为false,当弹框中有点击事件的时候可为true
    trigger: "item",
    triggerOn: 'click',//提示框触发的条件 'mousemove|click','mousemove','click'
    show: true,//是否显示提示框组件。
    padding: 0,//提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
    // borderColor: "#e3b020",//弹框边框颜色
    borderWidth: 1,//弹框边框宽度
    alwaysShowContent: true,//是否永远显示提示框内容
    formatter: (p: any) => {//自定义弹框内容    
      return formatter(p)
    },
    // '<button οnclick="hideTooltip('+p.data.adcode+')">点击</button>'+
  },
}
自定义数据
const formatter = (p: any) => {
  return '<div style="color:#fff;font-size:14px;height: 162px;background: #061547;padding:0;margin:0;position:relative;">' +
    `<img src="${'/src/assets/images/***.png'}">` +
    '<div style="position:absolute;top:0;left:0;width:100%;height:100%;">' +
    '<div style="font-weight:bold;font-size:19px;padding-top:3px;padding-left:38px;">' + p.name + '</div>' +
    '<div style="color:#9ba0b5;font-size:13px;padding:10px;">' +
    '<div >' +
    '负责人：' + '测试/182****1474' +
    '</div>' +
    '<div style="padding-top:5px;">' +
    '地   址：' + '测试地址测试地址测试地址测试地址测试地址测试地址测试地址' +
    '</div>' +
    '<div style="heigth:100px;background:#142251;margin-top:3px;padding: 8px 5px 3px 6px;display: flex;justify-content: space-between;">' +
    '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;" οnclick="hideTooltip(' + p.data.adcode + ')">' +
    `<img src="${'/src/assets/images/***.png'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' +
    '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;" >' +
    `<img src="${'/src/assets/images/icon_liuyg.svg'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' +
    `<img src="${'/src/assets/images/icon_dianzc.svg'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' +
    `<img src="${'/src/assets/images/icon_ai.svg'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' +
    `<img src="${'/src/assets/images/icon_chenj.svg'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>'
}
触发点击事件
onMounted(async () => {
  window.hideTooltip = function (parmas: any) {
    console.log('我是点击事件', parmas);
  }
})
7.tooltip自定义图片背景图

在这里插入图片描述

label: {
        normal: {
          show: true,
          color: "rgb(249, 249, 249)", //省份标签字体颜色
          formatter: function (param: any) {
            return '{icon|} ' + `{name|${param.name}}`; // {icon}为图片占位符
          },
          rich: {
            icon: {
              height: 25,
              width: 70,
              alingn: 'center',
              backgroundColor: {
                image: '/src/assets/images/***.png' // 设置图片路径
              }
            },
            name: {
              fontSize: 13,
              padding: [0, 0, 0, -58]
            }
          }
        },
}
8. 渲染地图
//获取geo数据
const getGeoJson = (adcode: any) => {
  return new Promise((resolve, reject) => {
    AMapLoader.load({
      key: '*******************', // 申请好的Web端开发者Key
      version: '1.4.4',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      AMapUI: {
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
    }).then(() => {
      new AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
        var districtExplorer = new DistrictExplorer();
        districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
          if (error) {
            console.error(error);
            reject(error, 'error 191');
            return;
          }
          let Json = areaNode.getSubFeatures();
          let mapJson = {
            features: [],
          };
          mapJson.features = Json;
          resolve(mapJson);
        })
      })
    }).catch(err => {
      console.log(err)
    })
  })
}
//处理数据
const getJson = (val: any) => {
  var MapJsons = [];
  var MapJson = [];
  //去拿地图json数据
  getGeoJson(val).then((res: any) => {
    //想要的数据
    MapJsons = res.features?.map((item: any) => {
      return {
        adcode: item.properties.adcode,
        name: item.properties.name,
        value: item.properties.name,
        level: item.properties.level,
        center: item.properties.center,
      };
    });

    MapJson = MapJsons?.sort(function (a: any, b: any) {
      return a.value - b.value;
    });
    //调用绘制地图方法
    drawMap(res, MapJson);
  });
};
//渲染地图
const drawMap = (map: any, MapJson: any) => {
  //拿到标签的dom
  let mapChart = echarts.init(document.getElementById("map"));
  echarts.registerMap("SUI", map); //注册地图
  // mapChart.off('click')
  //加载进去，后面的true为了重新绘制
  mapChart.setOption(mapOption, true);
  //点击事件
  mapChart.on("click", (params: any) => {
    // console.log('点击地图组件', params);
  })
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2209869.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JAVA自动化测试TestNG框架

JAVA自动化测试TestNG框架

1.TestNG简介 JAVA自动化测试最重要的基石。官网&#xff1a;https://testng.org 使用注解来管理我们的测试用例。 发现测试用例 执行测试用例 判断测试用例 生成测试报告 2.创建Maven工程 2.1创建一个maven工程 2.2设置maven信息 2.3设置JDK信息 2.4引入testng依赖 <dep…
阅读更多...
Linux下Docker方式Jenkins安装和配置

Linux下Docker方式Jenkins安装和配置

一、下载&安装 Jenkins官方Docker仓库地址&#xff1a;https://hub.docker.com/r/jenkins/jenkins 从官网上可以看到&#xff0c;当前最新的稳定版本是 jenkins/jenkins:lts-jdk17。建议下在新的&#xff0c;后面依赖下不来 所以&#xff0c;我们这里&#xff0c;执行doc…
阅读更多...
达梦数据库性能优化

达梦数据库性能优化

1、SQL执行计划 拿到一条SQL的时候&#xff0c;首先要下达梦手册中提出的有效SQL规范&#xff0c;及是否命中了特殊OR子句的不规范&#xff0c;是否用了复杂的正则表达式&#xff0c;避免重复很高的索引&#xff0c;UINON ALL 是否可以替换UNION操作等,某些场景INSTR函数导致的…
阅读更多...
FunASR离线文件转写服务开发指南-debian-10.13

FunASR离线文件转写服务开发指南-debian-10.13

FunASR离线文件转写服务开发指南-debian-10.13 服务器环境 debian10.13 64位 第一步 配置静态网卡 auto eth0 iface eth0 inet static address 192.168.1.100 netmask 255.255.255.0 gateway 192.168.1.1 dns-nameservers 8.8.8.8 8.8.4.4/etc/init.d/networking restart第…
阅读更多...
C++面试速通宝典——25

C++面试速通宝典——25

473. HTTP如何减少重定向请求 重定向请求&#xff1a; ‌‌‌‌　　服务器上的一个资源可能由于迁移、维护等原因从url1移至url2后&#xff0c;而客户端不知情&#xff0c;他还是继续请求url1&#xff0c;这时服务器不能粗暴地返回错误&#xff0c;而是通过302响应码和Locati…
阅读更多...
甲方安全和乙方安全的区别

甲方安全和乙方安全的区别

信息安全工作&#xff0c;总会被人分成甲方和乙方&#xff0c;甲乙方原本只是商务层面需方和供方的代称&#xff0c;在安全领域&#xff0c;成了做公司内部安全和为客户提供安全的区别。 通常意义上&#xff0c;什么是甲方安全人员呢&#xff1f;就是在非安全业务的公司从事信…
阅读更多...
ROS2 通信三大件之动作 -- Action

ROS2 通信三大件之动作 -- Action

通信最后一个&#xff0c;也是不太容易理解的方式action&#xff0c;复杂且重要 1、创建action数据结构 创建工作空间和模块就不多说了 在模块 src/action_moudle/action/Counter.action 下创建文件 Counter.action int32 target # Goal: 目标 --- int32 current_value…
阅读更多...
[Python学习日记-45] Python 中模块的介绍与导入

[Python学习日记-45] Python 中模块的介绍与导入

[Python学习日记-45] Python 中模块的介绍与导入 简介 模块的概念与好处 模块的分类 模块导入和调用 自定义模块 模块的查找路径 简介 在前面的学习当中偶尔我们会看到 import ... 一个什么东西的&#xff0c;或者 from ... import ...&#xff0c;那时候并没有进行介绍&…
阅读更多...
react+ts+vite 别名一直爆红问题

react+ts+vite 别名一直爆红问题

已经配置如下代码安装了types/node import path from "path"; // https://vitejs.dev/config/ export default defineConfig({plugins: [react()],server: {proxy: {"/api": {target: "http://localhost:3000",changeOrigin: true,rewrite: (pa…
阅读更多...
如何选择安全的谷歌浏览器插件

如何选择安全的谷歌浏览器插件

在数字时代&#xff0c;浏览器插件为我们提供了极大的便利&#xff0c;增强了我们的浏览体验。然而&#xff0c;随着便利性的增加&#xff0c;安全性问题也日益凸显。选择安全的谷歌浏览器插件是保障个人信息安全的重要步骤。以下是详细的教程&#xff0c;帮助你选择和使用安全…
阅读更多...
81 NAT-静态NAT

81 NAT-静态NAT

一 NAT 出口方向实验 1 配置接口的IP地址 2 配置nat 静态映射 3 测试 无法ping 通 202.38.1.100 4 接口上开启静态Nat映射规则 [FW-Router-BJ-GigabitEthernet0/1]nat static enable 6 5 查看配置 [FW-Router-BJ]display nat static 6 测试 7 查看NAT 会话状态 8 静态…
阅读更多...
Qt自定义一个圆角对话框

Qt自定义一个圆角对话框

如何得到一个圆角对话框&#xff1f; 步骤&#xff1a; 1、继承自QDiaglog 2、去掉系统自带的边框 3、设置背景透明,不设置4个角会有多余的部分出现颜色 4、对话框内部添加1个QWidget&#xff0c;给这个widget设置圆角&#xff0c;并添加到布局中让他充满对话框 5、后续对…
阅读更多...
Redis协议详解及其异步应用

Redis协议详解及其异步应用

目录 一、Redis Pipeline&#xff08;管道&#xff09;概述优点使用场景工作原理Pipeline 的基本操作步骤C 示例&#xff08;使用 [hiredis](https://github.com/redis/hiredis) 库&#xff09; 二、Redis 事务概述事务的前提事务特征&#xff08;ACID 分析&#xff09;WATCH 命…
阅读更多...
【HarmonyOS】HMRouter使用详解（二）路由跳转

【HarmonyOS】HMRouter使用详解（二）路由跳转

路由跳转 HMRouter中使用HMRouterMgr的静态方法push()和replace()来实现路由跳转。使用pop()方法来实现页面返回 push &#xff1a;目标页面不会替换当前页&#xff0c;而是插入页面栈。可以使用pop实现页面的返回操作。replace&#xff1a;目标页面会替换当前页&#xff0c;并…
阅读更多...
西门子828d的plc一些信息记录

西门子828d的plc一些信息记录

1、虽然是200的plc但是引入了DB的形式替代原来的V存储区。 2、用户自定义DB块范围&#xff0c;DB9000-DB9063,共64个DB块。 可用地址范围如上图 机床MCP483面板地址表&#xff0c;其它类型的面板地址自己在828d简明调试手册里查看。 如何上载828d的plc程序&#xff1a; 1.通…
阅读更多...
web-105linux权限提升

web-105linux权限提升

rsync未授权本地覆盖 Rsync 是 linux 下一款数据备份工具&#xff0c;默认开启 873 端口 https://vulhub.org/#/environments/rsync/common/ 借助 Linux 默认计划任务调用/etc/cron.hourly&#xff0c;利用 rsync 连接覆盖 前提条件就是需要知道rsync的密码或者存在未授权 -提…
阅读更多...
【成品设计】基于Arduino平台的物联网智能灯

【成品设计】基于Arduino平台的物联网智能灯

《基于Arduino平台的物联网智能灯》 整体功能&#xff1a; 这个任务中要求实现一个物联网智能灯。实际测试环境中要求设备能够自己创建一个热点&#xff0c;连接这个热点后能自动弹出控制界面&#xff08;强制门户&#xff09;。 功能点 基础功能 (60分) 要求作品至少有2个灯…
阅读更多...
发布-订阅模式（Publisher-Subscriber）

发布-订阅模式（Publisher-Subscriber）

实际上&#xff0c;发布-订阅模式只是观察者模式的一个别称。 但是经过时间的沉淀&#xff0c;似乎他已经强大了起来&#xff0c;已经独立于观察者模式&#xff0c;成为另外一种不同的设计模式。在现在的发布订阅模式中&#xff0c;称为发布者的消息发送者不会将消息直接发送给…
阅读更多...
Linux下基本指令

Linux下基本指令

Linux下基本指令 登录系统输入ssh root&#xff0c;在后面输入ip公用地址&#xff0c;按下enter键&#xff0c;会弹出一个密码框&#xff0c;输入密码即可登录成功。 Xshell下Altenter全屏&#xff0c;再重复操作是取消全屏。 clear清理屏幕。 01. ls 指令&#xff08;用来…
阅读更多...
[红队apt]文件捆绑攻击流程

[红队apt]文件捆绑攻击流程

免责声明:本文用于了解攻击者攻击手法&#xff0c;切勿用于不法用途 前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理黑客通过文件捆绑进行攻击的流程思路 文件捆绑原理 废话只多说这一句。 1.exe和2.exe被你捆绑为3.exe。 那么你点击了3.exe就等于点…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023