android canvas广告牌,cesium 实现广告牌移入显示tooltip

1、tooltip css

// tooltip 样式

.tooltipdiv-inner {

padding: 3px 8px;

}

/* 向左 */

.toolTip-left {

position: absolute;

width: 300px;

min-height: 80px;

border: 4px solid rgba(19, 159, 255, 1);

border-radius: 20px;

background-color: rgba(30, 49, 74, 0.6);

}

.toolTip-left:before {

content: "";

display: block;

position: absolute;

left: -20px;

top: 50%;

transform: translateY(-50%);

border-top: 20px solid transparent;

border-bottom: 20px solid transparent;

border-right: 20px solid rgba(19, 159, 255, 1);

}

// 内容样式

.con {

font-size: 28px;

color: #ffff;

line-height: 80px;

}

// tooltip 样式

.tooltipdiv-inner {

padding: 3px 8px;

}

/* 向左 */

.toolTip-left {

position: absolute;

width: 300px;

min-height: 80px;

border: 4px solid rgba(19, 159, 255, 1);

border-radius: 20px;

background-color: rgba(30, 49, 74, 0.6);

}

.toolTip-left:before {

content: "";

display: block;

position: absolute;

left: -20px;

top: 50%;

transform: translateY(-50%);

border-top: 20px solid transparent;

border-bottom: 20px solid transparent;

border-right: 20px solid rgba(19, 159, 255, 1);

}

// 内容样式

.con {

font-size: 28px;

color: #ffff;

line-height: 80px;

}

// 2、通过函数去动态创建tooltip的dom结构

tooltip.js

var TooltipDiv = (function () {

var isInit = false;

function _ () { };

_.initTool = function (frameDiv) {

if (isInit) { return; }

var div = document.createElement('DIV');

div.className = "toolTip-left";//

// var arrow = document.createElement('DIV');

// arrow.className = "tooltipdiv-arrow";

// div.appendChild(arrow);

var title = document.createElement('DIV');

title.className = "tooltipdiv-inner";

div.appendChild(title);

this._div = div;

this._title = title;

frameDiv.appendChild(div);

isInit = true;

}

_.setVisible = function (visible) {

if (!isInit) { return; }

this._div.style.display = visible ? 'block' : 'none';

};

/*

position屏幕坐标

显示在屏幕上

*/

_.showAt = function (position, message) {

if (!isInit) { return; }

if (position && message) {

this.setVisible(true);

this._title.innerHTML = message;

this._div.style.position = "absolute"

this._div.style.left = position.x + 60 + "px";

this._div.style.top = (position.y - this._div.clientHeight/2) + "px";

}

};

return _;

})();

export default TooltipDiv

// 在页面引入cesium界面tooltip.js

import TooltipDiv from "../../assets/tooltip.js"

var viewer = new Cesium.Viewer('cesiumContainer', {

imageryProvider: new Cesium.UrlTemplateImageryProvider({

url: 'http://www.google.cn/maps/vt?lyrs=y&x={x}&gl=cn&y={y}&z={z}',

tilingScheme: new Cesium.WebMercatorTilingScheme()

}),

creditContainer: "cesiumContainer",

selectionIndicator: false,

animation: false,

baseLayerPicker: false,

geocoder: false,

timeline: false,

sceneModePicker: true,

navigationHelpButton: false,

infoBox: false,

fullscreenButton: true

});

//绘制广告牌

let img = require("../assets/images/life.png")

viewer.scene.globe.depthTestAgainstTerrain = true;

var billboard = viewer.entities.add({

id: '111111',

name: "程海指挥中心",

info: {

name: 'aaaa',

val: 100

},

position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000),

billboard: {

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

image: img,

verticalOrigin: 0,

width: 32,

height: 145,

pixelOffset: new Cesium.Cartesian2(0, -72),

}

});

viewer.zoomTo(billboard);

var scene = viewer.scene;

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

TooltipDiv.initTool(viewer.cesiumWidget.container);

// 鼠标移入自定义弹出框

handler.setInputAction(function (movement) {

if (scene.mode !== Cesium.SceneMode.MORPHING) {

var pickedObject = scene.pick(movement.endPosition);

console.log(pickedObject, 'gggggg')

if (scene.pickPositionSupported && Cesium.defined(pickedObject) && pickedObject.id._id === '111111') {

TooltipDiv.showAt(movement.endPosition, `

名字：${pickedObject.id._name}

`);

} else {

TooltipDiv.setVisible(false);

}

}

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);