map体验二

options通用的属性:

{
    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, // 单个动画的时间，单位秒
    }
}

需求一 ------- 画扇形 sector

参考文章，我是修改这个文章来的
1.修改源码在 pathSimple 对象 draw 方法下 ‘Point’ 里添加 自定义 symbol类型

2.代码

if(symbol === 'sector'){
   var azimuth=Number(data.geometry.count)
   context.sector(coordinates[0], coordinates[1],size,azimuth-30,azimuth+30).fill();
}

3.使用

 var options = {
       size: size,
        symbol: 'sector', // 核心，自定义的类型就在这里配置
        fillStyle: 'rgba(0, 0, 0, 0)', // 填充颜色
        strokeStyle: 'green', // 描边颜色
        lineWidth: 1, // 描边宽度
        draw: 'simple',
        zIndex:1,
        methods: {
            click: function (item) {
                console.log(item);
            }
        },
    };
let mapvLayer = new mapv.baiduMapLayer(page.map, dataSet, options);

方法

修改配置

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

重新设置配置

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

图层

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

事件

mapv绘点选项中提供了两个事件方法， click和mousemove，事件参数有两个为item、event，item是dataSet中对应的数据