cesium 添加广告牌和鼠标移入显示弹框

拼搏现实的明天。 2022-12-27 08:24 176阅读 0赞

<div>

<div class="top">

<div class="topContent">

<div class="topTitle">煤炭供应</div>

</div>

<!-- <div class="topTitle">

<img :src="titleSvg" width="1920" height="70" />

</div> -->

<div class="centerMap">

<cesium-map-mei @ready="ready"></cesium-map-mei>

</div>

<coal-left>

<template slot-scope="user" slot="top">

<div class="tmp1">

<div class="line"></div>

</div>

</template>

<template slot-scope="user" slot="middle">

<div class="tmp2">

<div class="line"></div>

</div>

</template>

</coal-left>

<coal-right>

<template slot-scope="user" slot="rightTop">

<div class="tmp3">

<div class="line"></div>

<div class="titleStyle">

</div>

</template>

<template slot-scope="user" slot="rightMiddle">

<div class="tmp4">

<div class="line"></div>

<div class="titleStyle">

</div>

</template>

</coal-right>

</div>

</template>

import Vue from "vue";

import CoalBottom from "./CoalBottom.vue";

import CoalLeft from "./CoalLeft.vue";

import CoalRight from "./CoalRight.vue";

import Home from "../Home";

import CesiumMapMei from "../../components/CesiumMapMei.vue";

export default \{

name: "CoalSupply",

components: \{ CoalLeft, CoalRight, CoalBottom, Home, CesiumMapMei \},

data() \{

return \{

leftSvg: require("../../assets/images/arrow\_left.svg"),

rightSvg: require("../../assets/images/arrow\_right.svg"),

position: \{

degrees: \[117.863807, 36.462887, 2599.2725747138\],

heading: 348.75153786682165, //方向

pitch: -84.74079595488344, //倾斜角度

roll: 359.96671496629347,

duration: 1, //持续时间

\},

\};

\},

mounted() \{

this.addBillboard();

\},

methods: \{

ready(viewer) \{

Vue.prototype.viewer = viewer;

this.flyTo(this.position);

this.showPickedFeatureinfo(viewer);

\},

addBillboard() \{

this.viewer.entities.add(\{

id: "1",

name: "发电厂",

// data: \{ xx: "xxx" \},

position: Cesium.Cartesian3.fromDegrees(117.863807, 36.462887, 30.0),

billboard: \{

image: require("../../assets/images/icon\_coalr.png"),

width: 50,

height: 50,

\},

\});

this.viewer.entities.add(\{

id: "2",

name: "煤矿",

position: Cesium.Cartesian3.fromDegrees(117.863807, 36.469889, 30.0),

billboard: \{

image: require("../../assets/images/icon\_coal.png"),

width: 50,

height: 50,

\},

\});

\},

showPickedFeatureinfo(viewer) \{

var nameOverlay = document.createElement("div");

viewer.container.appendChild(nameOverlay);

nameOverlay.className = "backdrop";

nameOverlay.style.display = "none";

nameOverlay.style.position = "absolute";

nameOverlay.style.bottom = "0";

nameOverlay.style.left = "0";

nameOverlay.style\["pointer-events"\] = "none";

nameOverlay.style.padding = "4px";

nameOverlay.style.backgroundColor = "\#fff";

nameOverlay.style.width = "200px";

nameOverlay.style.height = "200px";

viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) \{

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

let name;

if (Cesium.defined(pick)) \{

if (pick.id) \{

if (pick.id.name) \{

if (pick.id.name == "发电厂" && pick.id.id == "1") \{

name = "发电厂";

nameOverlay.style.display = "block";

nameOverlay.style.color = "\#000000";

nameOverlay.style.bottom =

viewer.canvas.clientHeight - movement.endPosition.y + "px";

nameOverlay.style.left = movement.endPosition.x + "px";

nameOverlay.textContent = name;

\} else if (pick.id.name == "煤矿" && pick.id.id == "2") \{

name = "煤矿";

nameOverlay.style.display = "block";

nameOverlay.style.color = "\#000000";

nameOverlay.style.bottom =

viewer.canvas.clientHeight - movement.endPosition.y + "px";

nameOverlay.style.left = movement.endPosition.x + "px";

nameOverlay.textContent = name;

\} else \{

nameOverlay.style.display = "none";

\} else \{

nameOverlay.style.display = "none";

\} else \{

nameOverlay.style.display = "none";

\}, Cesium.ScreenSpaceEventType.MOUSE\_MOVE);

\},

\};

</script>

.top \{

width: 1920px;

height: 71px;

// background: linear-gradient(90deg, \#0a5f97 0%, rgba(4, 49, 94, 0.2) 100%);

background: linear-gradient(

90deg,

\#0a5f97 0%,

rgba(141, 228, 255, 0.08) 30%,

\#061930 100%

);

position: absolute;

top: 0;

left: 0;

.centerMap \{

width: 1000px;

height: 653px;

position: absolute;

top: 86px;

left: 450px;

.topContent \{

width: 23%;

height: 71px;

display: flex;

flex-direction: row;

justify-content: space-around;

align-items: center;

position: absolute;

top: 0px;

left: 20px;

.topTitle \{

font-size: 24px;

font-family: PingFangSC-Medium, PingFang SC;

font-weight: 500;

color: \#ffffff;

line-height: 68px;

letter-spacing: 8px;

text-shadow: 0px 5px 4px rgba(0, 0, 0, 0.5);

background: linear-gradient(180deg, \#26eafd 0%, \#bae3ff 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

.tmp1 \{

color: \#ffffff;

position: absolute;

top: 10px;

left: 10px;

z-index: 99999999999;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

.tmp2 \{

color: \#ffffff;

position: absolute;

top: 240px;

left: 10px;

z-index: 99999999999;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

.tmp3 \{

color: \#ffffff;

position: absolute;

top: -15px;

left: 10px;

z-index: 99999999999;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

.tmp4 \{

color: \#ffffff;

position: absolute;

top: 215px;

left: 10px;

z-index: 99999999999;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

.titleStyle \{

width: 420px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

</style>

cesium 添加广告牌和鼠标移入显示弹框

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 cesium: 显示闪烁的广告牌图片（005）

相关 JavaScript——鼠标移入移出事件

相关 cesium 添加广告牌和鼠标移入显示弹框

相关 Echarts - 鼠标 hover 移入去显示数据

相关 bootstrap框架鼠标滑过显示popover弹框内容，移走隐藏popover弹框内容

相关鼠标移入显示图片案例

相关鼠标的移入移出事件

相关 echarts中tooltips，鼠标移入提示框出界问题

相关纯CSS实现鼠标移入显示图标效果

相关 vue实现鼠标移入移出显示或者隐藏div