百度地图之文字图层和图标层

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

文字图层

• 文字展示图层，继承自Layer，可使用鼠标拾取Pick

  1. fontFamily ### collides

  2. 文字字体

  3. color 颜色

  4. fontSize 字体大小

  5. unit 绘制大小的方式，即指定fontSize属性的单位 ，默认值px，

     • 按像素绘制
     • 按米来绘制

  6. angle 文字是否随地图倾斜，即平躺在地图上

  7. offset 文字偏移量，基于文字中心点偏移

  8. selectedColor 选中态颜色

  9. autoSelect根据鼠标位置来自动设置选中项selectedIndex，使选中物体变色，设置为true后selectedIndex失效

  var textLayer = new mapvgl.TextLayer({
        // fontFamily: 'Songti SC',
        enablePicked: true,
        autoSelect: true,
        selectedColor: '#f00', // 选中项颜色
        color: '#ff0'
    });
  

图标层

• IconLayer
• 用来展示大数据量的简单点图层，继承自Layer。可使用鼠标拾取Pick

options属性

1. icon icon图标 object(canvas dom) 、string(图片url地址)
2. width 宽度
3. height 高度
4. scale 设置icon缩放
5. opacity图层的透明度，值为0-1
6. flat icon是否随地图倾斜，即平躺在地图上

var layer = new mapvgl.IconLayer({
       width: 200 ,
       height: 200 ,
       offset: [0, -153 / 8],
       opacity: 1,
       icon: 'https://img0.baidu.com/it/u=2027730681,1224762729&fm=26&fmt=auto&gp=0.jpg',
       enablePicked: true, // 是否可以拾取
       selectedIndex: -1, // 选中项
       selectedColor: '#ff0000', // 选中项颜色
       autoSelect: true, // 根据鼠标位置来自动设置选中项
       onClick: (e) => { // 点击事件
           console.log('click', e);
       },
       onDblClick: e => {
           console.log('double click', e);
       },
       onRightClick: e => {
           console.log('right click', e);
       }
   });

我们又可以看小屁啦～～～

鼠标拾取 鼠标交互行为，支持hover与click

options参数

1. enablePicked 是否开启鼠标事件，开启后支持鼠标onClick与onMousemove事件，同时支持改变拾取物体颜色。
2. selectedIndex 手动指定选中数据项索引，使该条数据所表示物体变色，-1表示没选中任何元素
3. onClick onClick({Object}pickObject) 点击事件，如果点击在可选中物体上，则返回对应数据
4. onRightClick 右键事件，如果右键在可选中物体上，则返回对应数据