如何在Vue中使用高德地图并渲染呼吸灯和飞线

已于 2024-01-21 15:58:01 修改
阅读量1.8k 收藏 15
点赞数 6
分类专栏： 地图系列 文章标签： vue.js npm 前端 echarts
于 2023-05-27 22:37:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tymarry/article/details/130426809
版权

一、注册并登录高德地图开放平台，申请密钥

高德开放平台 | 高德地图API高德开放平台|高德开放平台官网|高德开放平台控制台|官网控制台|控制台|应用管理|应用分析|账号信息|开发者信息|账号权限|KEY管理icon-default.png?t=N7T8https://lbs.amap.com/

 <script src="//webapi.amap.com/maps?v=1.4.15&key=自己申请的密钥&plugin=自己所需要的插件"></script>

二、引入高德地图加载器

npm i @amap/amap-jsapi-loader --save

三、封装一个自定义地图子组件并初始化地图

<template>
  <div
    ref="map"
    class="map-comp"
    id="container"
    style="width: 1710px;height: 845px;"
  ></div>
</template>

<script>
import "echarts-extension-amap";
import * as echarts from "echarts";
export default {
  name: "MapComp",
  data() {
    return {
      map: null,
      chart: null,
    };
  },

  mounted() {
    this.initMap();
  },

  methods: {
    createOption() {
      return {
        amap: {
          resizeEnable: true,
          mapStyle: "amap://styles/darkblue",  //地图颜色样式
          viewMode: "3D", //是否启用3d地图
          pitch: 30, //视角高度
          skyColor: "#021929", //天空颜色
          center: [108.94, 34.34] // 中心点坐标
        },      
      };
    },

    initMap() {
      const option = this.createOption();
      const chart = (this.chart = echarts.init(
        document.getElementById("container")
      ));
      chart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.map-comp {
  width: 100%;
  height: 100%;
}
</style>

 初始化地图的图片  注意上面提到引入自己的key和所需要用到的插件，我们这里用到的高德地图插件(plugin=AMap.CustomLayer&plugin=AMap.DistrictSearch)，放入script标签src里面即可。

 四、封装定义一个父组件，并将子组件导入

<template>
    <map-comp
      :points="points"
      :to-scatters="toScatters"
    />
</template>

<script>
import MapComp from "./indexSon.vue";

export default {
  name: "App",
  components: {
    MapComp
  },

  data() {
    return {
      // 飞线的数据格式
      points: [
        {
          from: [114.298572, 30.584355],
          to: [113.665412, 34.757975]
        },
        {
          from: [114.298572, 30.584355],
          to: [114.298572, 30.584355]
        },
        {
          from: [114.298572, 30.584355],
          to: [116.405285, 39.904989]
        }
      ],
      // 点的数据格式
      toScatters: [
        [113.665412, 34.757975, "郑州市"],
        [114.298572, 30.584355, "武汉市"],
        [116.405285, 39.904989, "北京市"]
      ]
    };
  },
};
</script>

五、子组件使用props接收父组件传过来的数据，并渲染呼吸灯和飞线

export default { 

 props: {

    points: {
      type: Array,
      default: () => []
    },

    toScatters: {
      type: Array,
      default: () => []
    },
  },

 methods:{
    createOption() {
      return {
        animation: true,
        series: [
          //呼吸灯
          {
            name: "scatter",
            type: "effectScatter",
            zlevel: 2,
            // 使用高德地图坐标系
            coordinateSystem: "amap",
            data: this.toScatters, //数据格式[y,x,name]
            symbolSize: 20, // 设置点的大小
            encode: {
              //维度
              value: 2
            },
            label: {
              normal: {
                formatter: "{@[2]}", //title提示的文字@后为索引
                position: "right", //显示位置
                show: true
              },
              emphasis: {
                //重点显示
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#00c1de" //颜色
              }
            },
            hoverAnimation: true,
            tooltip: {
              trigger: "item",
              formatter: "123"
            }
          },
          //飞线
          {
            type: "lines",
            zlevel: 1,
            coordinateSystem: "amap",
            animation: false,
            effect: {
              show: true,
              period: 2,
              symbol: "pin",
              symbolSize: 8,
              trailLength: 0.5
            },
            label: {
              normal: {
                show: false
              }
            },
            lineStyle: {
              normal: {
                width: 2, //尾迹线条宽度
                opacity: 0, //尾迹线条透明度
                curveness: 0.2 //尾迹线条曲直度
              }
            },
            //数据格式
            data: this.points.map(item => {
              return {
                coords: [item.from, item.to]
              };
            })
          }
        ]
      };
    },
  }
}

六、在每个呼吸灯设置打开弹窗显示一些数据


<script>
export default {
  data() {
    return {
      district: new window.AMap.DistrictSearch({
        extensions: "all",
        subdistrict: false
      }),
      polygons: null
    };
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      this.map = chart
        .getModel()
        .getComponent("amap")
        .getAMap();

      // 选中一个再点击另一个让其他的弹出窗关闭
      this.map.on("click", () => {
        if (this.infoWindow) this.infoWindow.close();
        if (this.polygons) {
          this.map.remove(this.polygons);
          this.polygons = null;
        }
      });

      // 设置点击事件将数据传给createInfoWindow方法
      chart.on("click", e => {
        if (e.componentSubType === "effectScatter" && e.data[3]) {
          if (this.infoWindow) this.infoWindow.close();
          this.infoWindow = this.createInfoWindow(e.data[3]);
          this.infoWindow.open(this.map, e.data);
        }
      });
    },

    // 设置窗体信息和样式
    createInfoWindow(info) {
      return new window.AMap.InfoWindow({
        anchor: "top-center",
        isCustom: true,
        offset: new window.AMap.Pixel(0, 15),
        content: `<div class="custom-info-window top-center">
                      <div>当前位置信息</div>
                      <div>提交时间：${info.time}</div>
                      <div>队伍名称：${info.name}</div>
                      <div>漏洞单位名称：${info.bugCompanyName}</div>
                      <div>漏洞类型：${info.bugType}</div>
                      <div>安全评级：${info.bugLevel}</div>
                      <div class="amap-info-sharp"></div>
                  </div>`
      });
    }

 
  }
};
</script>

<style lang="scss" scoped>
.map-comp {
  width: 100%;
  height: 100%;
}
</style>

<style>
.custom-info-window {
  color: #fff;
  background: rgba(25, 93, 202, 0.5);
  font-size: 12px;
  border: 1px solid rgba(25, 93, 202, 0.5);
}
.custom-info-window div:not(.amap-info-sharp) {
  padding: 2px 10px;
}
.custom-info-window div:first-of-type {
  border-bottom: 1px solid rgba(25, 93, 202, 0.5);
  text-align: center;
}
.top-center .amap-info-sharp {
  border-bottom-color: rgba(25, 93, 202, 0.5);
}
</style>

七、子组件的完整代码

<template>
  <div
    ref="map"
    class="map-comp"
    id="container"
    style="width: 1710px;height: 845px;"
  ></div>
</template>

<script>
import "echarts-extension-amap";
import * as echarts from "echarts";
export default {
  name: "MapComp",
  props: {
    points: {
      type: Array,
      default: () => []
    },
    toScatters: {
      type: Array,
      default: () => []
    },
  },

  data() {
    return {
      map: null,
      chart: null,
      district: new window.AMap.DistrictSearch({
        extensions: "all",
        subdistrict: false
      }),
      polygons: null
    };
  },

  mounted() {
    this.initMap();
  },

  methods: {
    createOption() {
      return {
        amap: {
          resizeEnable: true,
          mapStyle: "amap://styles/darkblue",
          viewMode: "3D", //是否启用3d地图
          pitch: 30, //视角高度
          skyColor: "#021929",
          showLabel: false, // 是否显示城市的名称
          center: [108.94, 34.34] // 中心点坐标
        },
        animation: true,
        series: [
          //呼吸灯
          {
            name: "scatter",
            type: "effectScatter",
            zlevel: 2,
            // 使用高德地图坐标系
            coordinateSystem: "amap",
            data: this.toScatters, //数据格式[y,x,name]
            symbolSize: 20, // 设置呼吸灯的大小
            encode: {
              //维度
              value: 2
            },
            label: {
              normal: {
                formatter: "{@[2]}", //title提示的文字@后为索引
                position: "right", //显示位置
                show: true
              },
              emphasis: {
                //重点显示
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#00c1de" //颜色
              }
            },
            hoverAnimation: true,
            tooltip: {
              trigger: "item",
              formatter: "123"
            }
          },
          //飞线
          {
            type: "lines",
            zlevel: 1,
            coordinateSystem: "amap",
            animation: false,
            effect: {
              show: true,
              // constantSpeed: 60,
              period: 2,
              symbol: "pin",
              symbolSize: 8,
              trailLength: 0.5
            },
            label: {
              normal: {
                show: false
              }
            },
            lineStyle: {
              normal: {
                width: 2, //尾迹线条宽度
                opacity: 0, //尾迹线条透明度
                curveness: 0.2 //尾迹线条曲直度
              }
            },
            //数据格式
            data: this.points.map(item => {
              return {
                coords: [item.from, item.to]
              };
            })
          }
        ]
      };
    },
    initMap() {
      const option = this.createOption();
      const chart = (this.chart = echarts.init(
        document.getElementById("container")
      ));
      chart.setOption(option);

      // get amap instance
      this.map = chart
        .getModel()
        .getComponent("amap")
        .getAMap();

      this.map.on("click", () => {
        if (this.infoWindow) this.infoWindow.close();
        if (this.polygons) {
          this.map.remove(this.polygons);
          this.polygons = null;
        }
      });

      chart.on("click", e => {
        if (e.componentSubType === "effectScatter" && e.data[3]) {
          if (this.infoWindow) this.infoWindow.close();
          this.infoWindow = this.createInfoWindow(e.data[3]);
          this.infoWindow.open(this.map, e.data);
        }
      });
    },
    createInfoWindow(info) {
      return new window.AMap.InfoWindow({
        anchor: "top-center",
        isCustom: true,
        offset: new window.AMap.Pixel(0, 15),
        content: `<div class="custom-info-window top-center">
                      <div>烽火</div>
                      <div>提交时间：${info.time}</div>
                      <div>名称：${info.name}</div>
                      <div class="amap-info-sharp"></div>
                  </div>`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.map-comp {
  width: 100%;
  height: 100%;
}
</style>

<style>
.custom-info-window {
  color: #fff;
  background: rgba(25, 93, 202, 0.5);
  font-size: 12px;
  border: 1px solid rgba(25, 93, 202, 0.5);
}
.custom-info-window div:not(.amap-info-sharp) {
  padding: 2px 10px;
}
.custom-info-window div:first-of-type {
  border-bottom: 1px solid rgba(25, 93, 202, 0.5);
  text-align: center;
}
.top-center .amap-info-sharp {
  border-bottom-color: rgba(25, 93, 202, 0.5);
}
</style>

八、按照以上步骤操完成之后会得到这样的一个地图，希望能帮到大家

Tymarry
关注
专栏目录
vue2/3 - 最新详细使用高德地图进行路线规划和详细途径路段信息，vue高德地图实现起点和终点路径高亮显示在地图上，并计算出整个路途公里数、预计到达时间、驾驶导航详细步骤信息（详细示例代码直接复制
高级前端工程师
05-11 3823
vue2，vue3，高德地图，vue高德地图，起点到终点，地图轨迹，路径规划，驾车轨迹图，利用高德地图实现车辆的路线规划，高德地图轨迹绘制，路段详细导航信息，vue实现高德地图路线规划功能，规划路线后如何获取途径的路段信息，途径数据，导航，导航详细数据，vue导航规划，导航路线规划绘制，导航规划后怎么获得途径的各路段，vue3使用高德地图，vue高德地图实现路线规划（含途经点），途径点详细数据，高德地图途径点怎么获取，行车路径规划 起始点+途经点，导航途径点数据用什么api，路线规划设置途经点，详细教程，高
Vue2 高德地图选点（带搜索）
zhuxichong123的博客
04-25 712
此组件封装依赖element ui 的弹窗组件，和input输入框组件。2.去高德地图开放平台注册key，和安全密钥。1.下载高德地图的插件。
高德地图手动实现轨迹，vue
weixin_38629440的博客
02-14 408
预览效果 1、高德地图的官网 使用的是web端，jsapi；https://lbs.amap.com/api/jsapi-v2/summary 2、准备 https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 注册账号——申请key，安全密钥，完全跟着官网走 准备页面 JSAPI key和安全密钥的使用 3、开发 渲染地图 设置自定义图层 设...
Vue 高德地图开发指南
最新发布
weixin_58462329的博客
09-01 662
通过以上步骤，你可以在Vue项目中轻松集成和使用高德地图。结合Vue的响应式特性和组件化思想，你可以创建出功能丰富、交互性强的地图应用。在实际开发中，还可以根据需求进一步探索高德地图的高级功能和API，以满足各种复杂的地图应用场景。
高德地图+echarts实现飞线图
weixin_42236849的博客
07-30 9544
下面是vue实现，原生html后续贴上来 前期准备： 引入amap、echarts、echarts-amap依赖，vue的话需要npm安装一下 By using script tag <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.15&key=ab99f68b8f9eac7a5287f...
高德地图和Echarts共同实现飞线图
m0_58293192的博客
01-18 1918
高德地图和Echarts共同实现飞线图
vue3+高德地图，使用抛物线连接两点，实现线路脉冲和呼吸灯动画效果
qq_61876792的博客
04-08 659
vue3项目使用高德地图实现抛物线连接，呼吸点动画及线路脉冲动画效果
Vue高德地图Loca 2.0飞线功能初体验
liyoro的专栏
09-15 3521
高德地图原来是没有飞线功能的，很多可视化效果和百度相比确实差很多。 在 Loca 2.0 API 里看到了一个PulseLinkLayer的图层 连接飞线图层，可以支持弧度，宽度，过渡色等能力。 并且还支持脉冲动画，可以表达数据的朝向。 按文档使用了下，发现没效果。发工单问了下，回答说文档有，但是功能是没有的，一周后会实现并上线使用例子？？？？？？？ 官方例子：北京人口流出弧线 代码实现 具体是在 [高德开放平台GeoHUB初用（Vue使用高德地图Loca 2.0）](https://liyoro.co
vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物 并编辑
05-07
1：实现对圆形、多边形、点标记、折线 等的绘制；...5：支持根据图形数据显示到地图上，进行后续操作（删除，编辑）； 6：支持获取绘制后的所有覆盖物数据，并返回； 7：支持封装为单个组件，多处调用；
vue 项目中使用高德地图
且听风吟的博客
03-23 1729
vue 项目中使用高德地图
vue3中使用高德地图apijs
qq_50931953的博客
06-25 1774
注意：1.本示例中的vue版本为3.3.9，高德地图版本为2.02.代码中的安全密钥及key不建议直接写在代码内。
echarts地图飞线实现
06-25
echarts地图展示、地图飞线，地图线行展示，大气、简洁、好看。
延时函数写的呼吸灯
10-11
PIC单片机用的，PIC12F675用，因它和常用的PIC16F877完全不一样。配置位和端口设置都不一样。这个是GP口。
通过css3动画和opacity透明度实现呼吸灯效果
12-10
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法，分享给大家，具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>呼吸灯</title> /*也可以通过加层罩，通过设置层罩透明度来实现亮度动画*/ <style> body{ background-color: black; } div{ margin: 0 auto; margin-top: 200px; width: 300px;
用css和JavaScript做成的呼吸灯效果置底和置底.zip
08-19
用css样式和JavaScript做成的呼吸灯效果的置顶和置底，并形成了动画的效果哦，已经定位到了页面的最右边，自己可以根据自己喜欢的位置进行设置
Vue3使用高德地图apijs时添加位置搜索并显示结果
qq_50931953的博客
06-27 1767
注意：示例代码为vue3，高德地图2.0，Elementui-plus。
Vue（二）：ECharts、高德地图-实现经纬度动态箭头指向飞线图
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
11-25 4209
准备 npm i echarts-extension-amap import "echarts-extension-amap"; npm i echarts import echarts from "echarts"; npm i @amap/amap-jsapi-loader import AMapLoader from "@amap/amap-jsapi-loader"; 展示 完整代码 <template> <div class="home">
vue渲染高德地图
youngKing0615的博客
01-18 689
vue渲染高德地图
Vue3 + ts 中使用 高德地图
nana18874597151的博客
03-21 1024
点击 个人中心 -> 应用管理 -> 我的应用 -> 添加新应用 -> 添加Key -> 得到key和 jscode（安全密钥）这时候需要我们扩展一下window的对象，创建一个新的 xxx.d.ts 的文件，写以下的代码即可，报错就会解决。随后当你写上这行代码的时候会报一个错误，如下。这两个文档都需要看，才能正常的使用高德地图。
在vue中使用高德地图
08-16
在 Vue 中使用高德地图，你可以通过 `vue-amap` 插件来实现。下面是一个使用高德地图的简单示例： 1. 在你的 Vue 项目中安装 `vue-amap` 插件。 ```bash npm install vue-amap --save ``` 2. 在 `main.js` 文件中引入并配置 `vue-amap` 插件。 ```javascript import VueAMap from 'vue-amap'; Vue.use(VueAMap); // 配置高德地图的 key 和插件 VueAMap.initAMapApiLoader({ key: 'your_amap_key', plugin: ['AMap.Geolocation', 'AMap.Marker'], }); ``` 替换 `'your_amap_key'` 为你自己的高德地图密钥。你可以在高德地图开放平台注册并获取密钥。 3. 在需要使用地图的组件中，使用 `a-map` 标签来引入地图。 ```vue <template> <div> <a-map :zoom="zoom" :center="center"> <a-marker :position="position"></a-marker> </a-map> </div> </template> <script> export default { data() { return { zoom: 13, center: [116.397428, 39.90923], position: [116.397428, 39.90923], }; }, }; </script> ``` 在上述示例中，我们创建了一个地图，并在地图上放置了一个标记点。 4. 你可以根据需要添加更多的地图组件或者使用高德地图提供的其他功能，具体可以参考 `vue-amap` 的文档。 以上是一个简单的 Vue 使用高德地图的示例。你可以根据自己的需求进行配置和使用，例如设置地图的初始缩放级别、中心点位置等。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值