1. Html2CanvasLayer

Extends: Layer

1.1. 初始化 new Html2CanvasLayer(options)

标签（自定义广告牌）。创建一个图层，实现html元素转换为canvas,并通过billboard加载到三维场景中

Example

let geomap = new BOSGeo.GeoMap('bosgeoContainer'); //初始化
let htm2can = layerManager.createLayer(BOSGeo.LayerType.HTML2CANVAS, 'html2canvas图层');

1.2. 方法

1.2.1. html2CanvasLayer.add(options) ⇒ Promise

将html元素通过转换添加至指定坐标位置

Returns : Promise -

包含billboard的Promise对象

Example

//Example 1.插件内容（content）不需要换行的标签
let htm2can = layerManager.createLayer(BOSGeo.LayerType.HTML2CANVAS, 'html2canvas图层');
htm2can.add({
    id: 'test',
    position: [114, 23 + 0.001, 1.1],
    html: `<div class="bosgeo-titleBack1">
                <div class="bosgeo-title_name bosgeo-title_name1"></div>
                <div class="bosgeo-title_content bosgeo-title_content1" ></div>
            </div> `,
    textNodeClassAndContentArr: [
        {
            className: "bosgeo-title_name bosgeo-title_name1",// 表示需要在类名 "bosgeo-title_name bosgeo-title_name1" 的标签上添加 "标题标签1"
            content: "标题标签1"
        },
        {
            className: "bosgeo-title_content bosgeo-title_content1",// 表示需要在类名 "bosgeo-title_content bosgeo-title_content1" 的标签上添加 "标题标签内容1"
            content: "标题标签内容1"
        }
    ]
})

//Example 2.插件内容（content）需要换行的标签
let htm2can = layerManager.createLayer(BOSGeo.LayerType.HTML2CANVAS, 'html2canvas图层');
htm2can.add({
    id: 'test',
    position: [114, 23 + 0.001, 1.1],
    html: `<div class="bosgeo-titleBack1">
                <div class="bosgeo-title_name bosgeo-title_name1"></div>
                <div class="bosgeo-title_content bosgeo-title_content1" ></div>
            </div> `,
    textNodeClassAndContentArr: [
        {
            className: "bosgeo-title_name bosgeo-title_name1",// 表示需要在类名 "bosgeo-title_name bosgeo-title_name1" 的标签上添加 "标题标签1"
            content: "标题标签1"
        },
        {
            className: "bosgeo-title_content bosgeo-title_content1",// 表示需要在类名 "bosgeo-title_content bosgeo-title_content1" 的标签上添加 "标题标签内容1"
            content: "标题标签内容1 <br/> 内容第二行 <br/>内容第三行"
        }
    ]
})

1.2.2. html2CanvasLayer.addList()

将html元素通过转换添加至指定坐标位置

Returns : Promise -

包含billboardList数组的Promise对象

Example

let htm2can = layerManager.createLayer(BOSGeo.LayerType.HTML2CANVAS, 'html2canvas图层');
let optionsArr = [];
for (let i = 1; i <= 100; i++) {
    let position = [114 + 0.0001 * (i + 2), 23.003 + 0.0001 * (i + 2), 0.1];
    let textNodeClassAndContentArr = [
        {
            className: "pointText pointText1",
            content: "普通标签" + (i + 1)
        }
    ];
    let options = {
        id: "test" + i,
        position,
        html: `<div class="pointBackg1">
                    <div class="pointText pointText1"></div>
                 </div>`,
        width: 164,
        height: 137,
        textNodeClassAndContentArr,
        // scale: 1 + 0.1 * i
    };
    optionsArr.push(options);
}

htm2can.addList(optionsArr).then(billboardList => {
    htm2can.zoomToLayer();
});

1.2.3. html2CanvasLayer.openSimplifyBillboard(fireType, [level])

开启抽稀, 一种是根据camera变化进行检测抽稀，另一种是根据鼠标滚轮滚动进行检测抽稀

Example

htm2can.openSimplifyBillboard('cameraChange');

1.2.4. html2CanvasLayer.closeSimplifyBillboard([fireType])

关闭抽稀

1.2.5. html2CanvasLayer.show(bool)

显隐

Example

htm2can.show(true);

1.2.6. html2CanvasLayer.zoomToLayer(callback)

缩放至本图层

Example

htm2can.zoomToLayer();

1.2.7. html2CanvasLayer.getBillboardById(id) ⇒ Billboard

根据id获取标签元素

Example

let bb = htm2can.getBillboardById(id);

1.2.8. html2CanvasLayer.setVisible(billboard, visible)

设置单个标签显隐

Example

let bb = htm2can.getBillboardById(id);
htm2can.setVisible(bb, true)

1.2.9. html2CanvasLayer.zoomTo(billboard)

缩放至billboard点标签对象

Example

let bb = htm2can.getBillboardById(id);
htm2can.zoomTo(bb)

1.2.10. html2CanvasLayer.updatePosition(billboard, position)

更新billboard的位置坐标

Example

let bb = htm2can.getBillboardById(id);
htm2can.updatePosition(bb, [112, 24, 30])

1.2.11. html2CanvasLayer.removeById(id)

根据id删除指定元素

Example

htm2can.removeById(id)

1.2.12. html2CanvasLayer.removeAll()

删除所有添加的元素

1.2.13. html2CanvasLayer.destroy()

销毁本图层

1.2.14. html2CanvasLayer.openClickZoomTo()

开启点击某个标签缩放至该点标签事件

1.2.15. html2CanvasLayer.closeClickZoomTo()

关闭点击某个标签缩放至该点标签事件

1.2.16. html2CanvasLayer.openMoveInPointer()

开启鼠标移入点标签变为pointer手形事件

1.2.17. html2CanvasLayer.closeMoveInPointer()

关闭鼠标移入点标签变为pointer手形事件