加载中…Cesium学习笔记-工具篇01-Tooltip-entity方式
(2018-07-21 17:08:53)
标签：
cesiumtooltip |
分类： Cesium |
在前面博客我们一起学习了cesium基础接口，从本篇开始，我们学习cesium一些常用工具编写。一些工具是基于现成的开源项目改编，一些是自己造车轮。今天我们学习最基础的一个工具：tooltip。
var esri = new
Cesium.ArcGisMapServerImageryProvider({
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;
TooltipCesium.initTool(viewer);
//一 鼠标MOUSE_MOVE
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.endPosition,
ellipsoid);
if
(cartesian) {
TooltipCesium.showAt(movement.endPosition, 'MOUSE_MOVE');
} else
{
TooltipCesium.setVisible(false);
}
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//二 LEFT_CLICK
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if
(cartesian) {
TooltipCesium.showAt(movement.position, 'LEFT_CLICK');
} else
{
TooltipCesium.setVisible(false);
}
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
//三 LEFT_DOUBLE_CLICK
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if
(cartesian) {
TooltipCesium.showAt(movement.position, 'LEFT_DOUBLE_CLICK');
} else
{
TooltipCesium.setVisible(false);
}
},
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//四 LEFT_DOWN
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if
(cartesian) {
TooltipCesium.showAt(movement.position, 'LEFT_DOWN');
} else
{
TooltipCesium.setVisible(false);
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
//五 LEFT_UP
handler.setInputAction(function (movement)
{
cartesian
= viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if
(cartesian) {
TooltipCesium.showAt(movement.position, 'LEFT_UP');
} else
{
TooltipCesium.setVisible(false);
}
}, Cesium.ScreenSpaceEventType.LEFT_UP);
最终效果：
tooltip实现方式主要分两种：entity和div。
entity：基于cesium提供的entity接口
优点：显示灵活，无鼠标悬浮上面丢失焦点的bug
缺点：遮挡问题
div：基于悬浮的div控件
优点：无遮挡问题
缺点：有鼠标悬浮上面丢失焦点的bug
今天介绍基于entity方式，我们封装TooltipCesium对象：
var isInit =
false;
var viewer;
var labelEntity;
function _() { };
_.initTool = function
(_viewer) {
if (isInit) { return; }
viewer = _viewer;
labelEntity = viewer.entities.add({
position:
Cesium.Cartesian3.fromDegrees(0, 0),
label:
{
text: '提示',
font: '15px
sans-serif',
pixelOffset: new
Cesium.Cartesian2(8, 8),//y大小根据行数和字体大小改变
horizontalOrigin:
Cesium.HorizontalOrigin.LEFT,
showBackground: true,
backgroundColor: new
Cesium.Color(0.165, 0.165, 0.165, 1.0)
}
});
labelEntity.show = false;
isInit = true;
}
_.setVisible = function
(visible) {
if (!isInit) { return; }
labelEntity.show = visible ? true : false;
};
_.showAt = function
(position, message) {
if (!isInit) { return; }
if (position && message) {
labelEntity.show = true;
var
cartesian = viewer.camera.pickEllipsoid(position,
viewer.scene.globe.ellipsoid);//
if
(cartesian) {
labelEntity.position =
cartesian;
labelEntity.show =
true;
labelEntity.label.text =
message;
} else
{
labelEntity.show =
false;
}
}
};
_.showAtCartesian =
function (cartesian, message) {
if (!isInit) { return; }
if (cartesian && message) {
labelEntity.show = true;
labelEntity.position = cartesian;
labelEntity.show = true;
labelEntity.label.text = message;
}
};
return _;
var TooltipCesium = (function () {
})();
此工具使用前需要init，传入Cesium.Viewer对象。提供：
setVisible-控制显隐
showAt-显示屏幕坐标
showAtCartesian-显示的世界坐标
基于前面的学习笔记Cesium学习笔记12--鼠标事件我们写了测试示例：
我的学习公众号也开通，感兴趣的小伙伴们可以加关注：giserYZ2SS，代码交流小伙伴在公众号发消息，我会一一回复的。
喜欢
0
赠金笔