cesium原有infobox 不好調(diào)位置,樣式不好調(diào),自己寫一個(gè)靈活

1、map.vue中 html:
<template> <div ref="mapContainer" id="mapContainer" style="width: 100%; height: 100%;"> <div style="position: absolute;z-index: 2; visibility: hidden;background-color: #ffffff; max-height: 300px; overflow-y: auto; box-shadow: rgba(106, 146, 228, 0.2) 0rem 0.285714rem 2.14286rem 0rem, rgb(255, 255, 255) 0.142857rem 0.142857rem 0.0714286rem 0rem inset;" ref="infoBox" id="infobox"> </div> </div> </template>
2、代碼
<script lang="ts" setup> import { onMounted, ref, defineProps, watch, toRefs } from 'vue';
let viewer: Viewer | null = null; let cartesian; onMounted(() => { Cesium.Credential.CREDENTIAL = new Cesium.Credential( "超圖iserver地圖token", "token"); viewer = new Cesium.Viewer('mapContainer',{infoBox: false }); //鼠標(biāo)單擊左鍵 點(diǎn)擊白模 事件 viewer.screenSpaceEventHandler.setInputAction(async function onMouseClick(click) { const ray = viewer.camera.getPickRay(click.position); cartesian = viewer.scene.globe.pick(ray, viewer.scene); //獲取到了白模實(shí)體 var pickedFeature = viewer.scene.pick(click.position); if (Cesium.defined(pickedFeature)) {
//根據(jù)白模上的id 值請(qǐng)求接口數(shù)據(jù) let params = { "datasetNames": ["fclt:xx_bm"], "getFeatureMode": "ID", "ids": [pickedFeature.id], "hasGeometry": true } const res = await featureResults(params, '超圖iserver地圖token') let item = createObjByFeature(res.data.features[0].fieldNames,res.data.features[0].fieldValues); let desp = createDescriptionHtml(item); //添加事件,左鍵點(diǎn)擊到實(shí)體了就添加 viewer.scene.postRender.addEventListener(updatePosition); Popupposition(click.position,pickedFeature.id,desp) }else{ //未點(diǎn)擊到實(shí)體,隱藏 + 移除事件 document.getElementById('infobox').style.display = "none"; viewer.scene.postRender.removeEventListener(updatePosition); } },Cesium.ScreenSpaceEventType.LEFT_CLICK); }); const updatePosition=()=> { // 將WGS84坐標(biāo)中的位置轉(zhuǎn)換為窗口坐標(biāo) let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian); // 數(shù)值是樣式中定義的寬高 if (windowPosition == undefined) return document.getElementById('infobox').style.left = (windowPosition.x - (220 / 2)) + 'px' document.getElementById('infobox').style.top = (windowPosition.y +20) + 'px' } const createDescriptionHtml = (item)=>{ let contentHtml = '<table class="cesium-infoBox-defaultTable"><tbody>'; for (let pro in item) { if (pro == "positions") continue; contentHtml += '<tr><th>' + `${pro}` + '</th>' + '<td>' + `${item[pro]}` + '</td>' + '</tr>' } contentHtml += '</tbody></table>' return contentHtml } const createObjByFeature=(fieldNames,fieldValues)=>{ let obj = {}; for(let i = 0; i < fieldNames.length; i++){ // 構(gòu)造對(duì)象 obj[fieldNames[i]] = fieldValues[i]; } return obj; } const Popupposition=(pos,id,desp)=>{ document.getElementById('infobox').innerHTML = desp document.getElementById('infobox').style.display = 'block' //彈出信息框 document.getElementById('infobox').style.visibility = 'visible' document.getElementById('infobox').style.left = (pos.x) + 'px' document.getElementById('infobox').style.top = (pos.y) + 'px' }
超圖接口返回:

位置跟隨也可以參考這里
浙公網(wǎng)安備 33010602011771號(hào)