百度地图mapv.baiduMapLayer使用与参数说明
一、使用步骤
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)