Home Github Example

Class

Css3Renderer

Css3Renderer(elements, isBackHide)

Constructor

# new Css3Renderer(elements, isBackHide)

全局类： 通过html标签构建信息框

Parameters:
Name Type Attributes Default Description
elements Array
id string

dom ID
parentEleId string <optional>
 info-warp

挂载信息框容器的ID
position Array

坐标
element string

字符串html 标签
offset Array <optional>
 [0,0]

偏移
isBackHide boolean

是否超出视野隐藏
Example
new Cesium.Scene.Css3Renderer([{
              id: 'box4',
              parentEleId: 'info-warp',
              position: [104.08985268964015, 30.635443158056148, 50.0],
              element: `<div class="ys-css3-box ex-box" id="box4"><div class="close__box__btn">X</div>xxx 信息点</div>`,
              offset: [10, 10]
            }], true);

Methods

# addEntityLayer(object)

注意：如果想指定挂载dom 需要 在new Cesium.Scene.Css3Renderer(),指定parentEleId，如 new Cesium.Scene.Css3Renderer([{ parentEleId: 'entityLayer-BOX', }], true);

Parameters:
Name Type Description
object object
id string
position Array

坐标
elements.parentEleId string

挂载信息框容器的ID
object.element string

html 标签字符串
object.offset Array

偏移
object.boxShow boolean

是否构建box 实例
object.circleShow boolean

是否构建椭圆实例
Example
let css3Renderer = new Cesium.Scene.Css3Renderer([], true);
          css3Renderer.addEntityLayer({
            position: [104.06417395476578, 30.636185094244944, 30.0],//高度为 boxHeightMax
            element: `<div class='ysc-dynamic-layer ys-css3-box'>
                  <div class='line'></div>
                  <div class='main' style="font-size:20px">
                            <div class="" style="color:#ff9800">信息点</div>
                          <div class=""> 鑫鑫大厦 </div>
                    </div>
              </div>`,
            offset: [10, -250],
            boxShow: false,
            circleShow: false,
          })

# close()

关闭信息框

Example
const css3Render = new Cesium.Scene.Css3Renderer([{
              id: 'box4',
              parentEleId: 'info-warp',
              position: [104.08985268964015, 30.635443158056148, 50.0],
              element: `<div class="ys-css3-box ex-box" id="box4"><div class="close__box__btn">X</div>xxx 信息点</div>`,
              offset: [10, 10]
            }], true);

            setTimeout(()=>{css3Render.close()},1000)

# remove(id)

根据Id 移除信息框中元素

Parameters:
Name Type Description
id string

需移除dom 元素的id
Example
const css3Render = new Cesium.Scene.Css3Renderer([{
              id: 'box4',
              parentEleId: 'info-warp',
              position: [104.08985268964015, 30.635443158056148, 50.0],
              element: `<div class="ys-css3-box ex-box" id="box4"><div class="close__box__btn">X</div>xxx 信息点</div>`,
              offset: [10, 10]
            }], true);

            setTimeout(()=>{css3Render.remove("box4")},2000)