百度地图实现自定义标注的聚合

引入百度地图api文件

创建地图实例并设置基本属性
function huaLine(id, sj, numSelect) {
// 百度地图API功能
map = new BMap.Map(id, { mapType: BMAP_HYBRID_MAP }); //创建Map实例,混合地图,既有坐标,也有绿油油一片的卫星地图
map.centerAndZoom(new BMap.Point(104.06, 30.67), 5); //初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

引入百度地图点聚合插件

创建自定义标注实现点聚合
//创建数组
var markers = [];
//创建带有x和y以像素为单位的坐标的点
var pt = new BMap.Point(longitude, latitude);
//设置标注的图标及修改引入图片的大小
var myIcon = new BMap.Icon("…/…/img/work/yuan.png", new BMap.Size(32, 32));

             // 创建标注,设置标注的经纬度和标注的图片
        var marker2 = new BMap.Marker(pt, { icon: myIcon });
     //将需要聚合的点添加到数组中
      markers.push(marker2);
   //初始化点聚合
 var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

注:现有点聚合插件比较卡顿,可以去百度上搜索一些大佬修改过的插件使用

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用百度地图中的MapVGL可以实现高性能的地图可视化。下面是一个简单的使用MapVGL的React组件示例: ```javascript import React, { Component } from 'react'; import BMapGL from 'BMapGL'; import { MapvglView } from '@mapvgl/mapvgl'; class MapvglDemo extends Component { componentDidMount() { const { center, zoom } = this.props; const map = new BMapGL.Map('map', { enableMapClick: false }); map.centerAndZoom(new BMapGL.Point(center[0], center[1]), zoom); const mapvglView = new MapvglView({ map }); const data = [ { geometry: { type: 'Point', coordinates: [116.3956, 39.9299] } }, { geometry: { type: 'Point', coordinates: [117.210813, 39.14393] } }, { geometry: { type: 'Point', coordinates: [121.526176, 31.216496] } }, ]; const layer = new mapvglView.Layer({ zIndex: 1, data: data, type: 'point', shape: 'circle', size: 10, color: 'rgba(255, 0, 0, 0.8)', strokeColor: 'rgba(255, 255, 255, 1)', strokeWidth: 2, isHotspot: true, isInteractive: true, }); mapvglView.addLayer(layer); } render() { return <div id="map" style={{ height: '400px' }} />; } } export default MapvglDemo; ``` 在上面的代码中,我们首先引入了百度地图的BMapGL库和MapVGL的React组件MapvglView。在组件的`componentDidMount`生命周期函数中,我们创建了一个百度地图实例,并将其传递给MapvglView的构造函数中,然后创建了一个图层,并将其添加到MapvglView中。最后,我们在render函数中返回了一个div元素作为地图容器。 需要注意的是,为了让MapVGL正常工作,你需要在HTML文件中引入MapVGL的JavaScript文件和CSS文件。具体可以参考MapVGL的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值