百度地图mapv.baiduMapLayer使用与参数说明

阅读目录

• 一、使用步骤
• 二、mapv options参数说明
• 三、mapv图层操作

一、使用步骤

1、创建地图

// 创建Map实例
var map = new BMap.Map("map", {
  enableMapClick: false
});    
       
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(106.962497, 38.208726), 4);  

// 设置地图样式
map.setMapStyle({
  style: 'midnight'
});

2、地理信息数据示例

var data = [
    // 点数据
    {
        geometry: {
            type: 'Point',
            coordinates: [123, 23]
        },
        fillStyle: 'red',
        size: 30
    },
    {
        geometry: {
            type: 'Point',
            coordinates: [121, 33]
        },
        fillStyle: 'rgba(255, 255, 50, 0.5)',
        size: 90
    },
    // 线数据
    {
        geometry: {
            type: 'LineString',
            coordinates: [
                [123, 23], 
                [124, 24]
            ]
        },
        count: 30
    },
    // 面数据
    {
        geometry: {
            type: 'Polygon',
            coordinates: [
                [
                    [123, 23], 
                    [123, 23], 
                    [123, 23]
                ]
            ]
        },
        count: 30 * Math.random()
    }
];

var dataSet = new mapv.DataSet(data);

3、添加百度地图可视化叠加图层

    var options = {
        fillStyle: 'rgba(55, 50, 250, 0.6)',
        shadowColor: 'rgba(55, 50, 250, 0.5)',
        shadowBlur: 10,
        size: 5,
        draw: 'simple'
    }

    var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

二、mapv options参数说明

1、通用属性

{
    zIndex: 1, // 层级
    size: 5, // 大小值
    unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小
    mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)
    fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色
    strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色
    lineWidth: 4, // 描边宽度
    globalAlpha: 1, // 透明度
    globalCompositeOperation: 'lighter', // 颜色叠加方式
    coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认)
    shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色
    shadowBlur: 35,  // 投影模糊级数
    updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间
    },
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线
    lineCap: 'butt',
    lineJoin: 'miter',
    miterLimit: 10,
    methods: { // 一些事件回调函数
        click: function (item) { // 点击事件，返回对应点击元素的对象值
            console.log(item);
        },
        mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值
            console.log(item);
        },
        tap: function(item) {
            console.log(item) // 只针对移动端,点击事件
        }
    },
    animation: {
        type: 'time', // 按时间展示动画
        stepsRange: { // 动画时间范围,time字段中值
            start: 0,
            end: 100
        },
        trails: 10, // 时间动画的拖尾大小
        duration: 5, // 单个动画的时间，单位秒
    }
}

 2、options draw属性

simple 最直接的方式绘制点线面
time 按时间字段来动画展示数据
heatmap 热力图展示
grid 网格状展示
honeycomb 蜂窝状展示
bubble 用不同大小的圆来展示
intensity 根据不同的值对应按渐变色中颜色进行展示
category 按不同的值进行分类，并使用对应的颜色展示
choropleth 按不同的值区间进行分类，并使用对应的颜色展示
text 展示文本
icon 展示icon

3、修改options相关方法

 

mapvLayer.update({
options: {} // 修改配置
 
});

 

 

mapvLayer.setOptions({
size: 1
 
}); // 重新设置配置

 

三、mapv图层操作

mapvLayer.show(); // 显示图层
mapvLayer.hide(); // 隐藏图层
mapvLayer.destroy(); // 销毁当前图层

 

详情参考： src/map/baidu-map/Layer.md · younghxp/mapv - 码云 - 开源中国 (gitee.com)