加载中…Cesium学习笔记-工具篇02-Tooltip-div方式
(2018-07-22 09:32:06)
标签：
cesiumtooltip |
分类： Cesium |
在前一篇博客我们了解了用cesium提供的entity接口实现tooltip，该方式存在被其它对象遮挡的问题。这篇博客我们学习另外一种方式实现tooltip：悬浮在viewer之上的div。
display: block;
position:
absolute;
visibility:
visible;
max-width: 200px;
min-width: 100px;
padding: 1px 1px 1px
25px;
font-size: 11px;
z-index: 1000;
opacity: 0.8;
-khtml-opacity:
0.8;
-moz-opacity: 0.8;
filter:
alpha(opacity=80);
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid
transparent;
border-bottom: 5px solid
transparent;
border-left: 25px solid
#000000;
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid
transparent;
border-bottom: 5px solid
transparent;
border-right: 25px solid
#000000;
padding: 3px 8px;
background-color:
#000000;
color: white;
text-align:
center;
max-width: 200px;
text-decoration:
none;
-webkit-border-radius:
4px;
-moz-border-radius:
4px;
border-radius:
4px;
position:
absolute;
width: 0;
height: 0;
var isInit =
false;
function _() { };
_.initTool = function
(frameDiv) {
if (isInit) { return; }
var div = document_createElement_x_x('DIV');
div.className = "tooltipdiv right";//
var arrow =
document_createElement_x_x('DIV');
arrow.className = "tooltipdiv-arrow";
div.a(arrow);
var title =
document_createElement_x_x('DIV');
title.className = "tooltipdiv-inner";
div.a(title);
this._div = div;
this._title = title;
frameDiv.a(div);
isInit = true;
}
_.setVisible = function
(visible) {
if (!isInit) { return; }
this._div.style.display = visible ? 'block' :
'none';
};
_.showAt = function
(position, message) {
if (!isInit) { return; }
if (position && message) {
this.setVisible(true);
this._title.innerHTML = message;
this._div.style.left = position.x + 10 + "px";
this._div.style.top = (position.y - this._div.clientHeight / 2) +
"px";
}
};
return _;
url:
'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
enablePickFeatures: false
});
var viewer = new
Cesium.Viewer('cesiumContainer', {
imageryProvider: esri,
contextOptions: {
webgl: {
alpha: true
}
},
creditContainer: "creditContainer",
selectionIndicator: false,
animation:
false,
baseLayerPicker: false,
geocoder:
false,
timeline:
false,
sceneModePicker: true,
navigationHelpButton: false,
infoBox:
false,
fullscreenButton: true
});
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55,
3000000)
});
var scene = viewer.scene;
var handler = new
Cesium.ScreenSpaceEventHandler(scene.canvas);
var ellipsoid =
scene.globe.ellipsoid;
var cartesian = null;
TooltipDiv.initTool(viewer.cesiumWidget.container);
//一 鼠标MOUSE_MOVE
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.endPosition,
ellipsoid);
if
(cartesian) {
TooltipDiv.showAt(movement.endPosition, 'MOUSE_MOVE');
} else
{
TooltipDiv.setVisible(false);
}
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//二 LEFT_CLICK
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if
(cartesian) {
TooltipDiv.showAt(movement.position, 'LEFT_CLICK');
} else
{
TooltipDiv.setVisible(false);
}
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
//三 LEFT_DOUBLE_CLICK
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if
(cartesian) {
TooltipDiv.showAt(movement.position, 'LEFT_DOUBLE_CLICK');
} else
{
TooltipDiv.setVisible(false);
}
},
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//四 LEFT_DOWN
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if
(cartesian) {
TooltipDiv.showAt(movement.position, 'LEFT_DOWN');
} else
{
TooltipDiv.setVisible(false);
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
//五 LEFT_UP
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if
(cartesian) {
TooltipDiv.showAt(movement.position, 'LEFT_UP');
} else
{
TooltipDiv.setVisible(false);
}
}, Cesium.ScreenSpaceEventType.LEFT_UP);
效果：
首先我们定义tooltip的样式：
.tooltipdiv {
}
.tooltipdiv.left .tooltipdiv-arrow {
}
.tooltipdiv.right .tooltipdiv-arrow {
}
.tooltipdiv-inner {
}
.tooltipdiv-arrow {
}
tooltip包括一个文本框和一个箭头，箭头分为左箭头和右箭头两种形式。
然后定义TooltipDiv 对象：
var TooltipDiv = (function () {
})();
此工具需要init，传入viewer.cesiumWidget.container对象，提供：
setVisible -控制显隐；
showAt ：显示屏幕坐标
基于前面的学习笔记Cesium学习笔记12--鼠标事件，写了以下示例：
var esri = new Cesium.ArcGisMapServerImageryProvider({
我的学习公众号也开通，感兴趣的小伙伴们可以加关注：giserYZ2SS，代码交流小伙伴在公众号发消息，我会一一回复的。
喜欢
0
赠金笔