百度地图离线开发demo-聚合图（vue+百度地图3.0+百度瓦片）（仅供参考，学习探讨）

oliver666666

已于 2023-05-09 11:44:27 修改

阅读量707

点赞数

分类专栏：百度地图离线3.0+百度瓦片+vue 文章标签：学习

于 2022-12-01 09:51:33 首次发布

本文链接：https://blog.csdn.net/oliver666666/article/details/128126809

版权

百度地图离线3.0+百度瓦片+vue 专栏收录该内容

7 篇文章 4 订阅 ¥9.90 ¥99.00

订阅专栏

这是一个关于使用Vue和百度地图3.0进行离线地图开发的demo，涵盖了海量数据绘制、迁徙图、弹窗边界避让、热力图和初始化离线地图等功能。注意，瓦片图需自行寻找免费资源。文中还提到对聚合点分组功能进行了优化，实现了根据数值范围设置图标和样式，并调整了服务器JS文件，本地调用时需注意变量恢复。

摘要由CSDN通过智能技术生成

demo内容有：（海量数据地图绘制，迁徙图，弹窗边界避让的问题，热力图，初始化离线地图），有需要可以评论问我。。。。demo列的都是我有写过，并且实现的。有需求也可以说。我有时间写demo。瓦片没有找到免费的！我也没找到！可以自行找免费的瓦片！

聚合点分组功能有进行修改，即对应聚合层级，数值将有实际意义，可在对应的数值范围设置对应的图标与样式，修改了对应的服务器js文件

所以本地调用是，修改了全局的变量，在desroty时需要恢复默认值

mounted() {
  // 需destroy时清空，否则全局污染
  // eslint-disable-next-line no-undef
  bmapConfig.polymerizationStyle = [
    {
      url: require('./images/m0test.png'),
      belong: [1, 0],
      size: new BMap.Size(53, 53),
      textColor: '#130c0e',
      textSize: 12
    },
    {
      url: require('./images/m1.png'),
      belong: [3, 2],
      size: new BMap.Size(56, 56),
      textColor: '#009ad6',
      textSize: 14
    },
    {
      url: require('./images/m2.png'),
      belong: [5, 4],
      size: new BMap.Size(66, 66),
      textColor: '#ffc20e',
      textSize: 16
    },
    {
      url: require('./images/m3.png'),
      belong: [7, 6],
      size: new BMap.Size(78, 78),
      textColor: '#494e8f',
      textSize: 18
    },
    {
      url: require('./images/m4.png'),
      belong: [1000, 8],
      size: new BMap.Size(90, 90),
      textColor: '#ed1941',
      textSize: 20
    }
  ]
  this.$refs.baiduMapRefs.initMap()
  this.addPolymerization()
},

beforeDestroy() {
  // eslint-disable-next-line no-undef
  bmapConfig.polymerizationStyle = []
},

/**
 * 添加聚合图
 */
addPolymerization(points = [], layer) {
  const markers = []
  let pt = null
  points.forEach((item) => {
    pt = new BMap.Point(item.lng, item.lat)
    markers.push(new BMap.Marker(pt))
  })
  // 最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
  this[layer] = new BMapLib.MarkerClusterer(this.map, {
    markers: markers
  })
  // 也可在MarkerClusterer构造函数的第二个参数中加入styles属性，直接将样式写入，两种方式都行
  // markerClusterer.setStyles(myStyles);
},