安装vue3+vite项目
npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
安装cesium+vite-plugin-cesium
vite-plugin-cesium 方便配置 cesium ,webpack配置cesium 比较难
npm i cesium --save
npm i -D vite vite-plugin-cesium
或
npm i vite-plugin-cesium -D
运行
npm run dev
在vite.config.js中配置如下
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium()]
})
话不多说，直接上代码
<script>
import * as Cesium from "cesium";
import { onMounted,ref } from "vue";
export default {
setup(){
let text = ref('哈哈哈哈')
onMounted(() => {
var viewer = new Cesium.Viewer( 'cesiumContainer', {
animation : false,//是否创建动画小器件，左下角仪表
baseLayerPicker : false,//是否显示图层选择器
fullscreenButton : false,//是否显示全屏按钮
geocoder : false,//是否显示geocoder小器件，右上角查询按钮
homeButton : false,//是否显示Home按钮
infoBox : false,//是否显示信息框
sceneModePicker : false,//是否显示3D/2D选择器
selectionIndicator : false,//是否显示选取指示器组件
timeline : false,//是否显示时间轴
navigationHelpButton : false,//是否显示右上角的帮助按钮
scene3DOnly : true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
clock : new Cesium.Clock(),//用于控制当前时间的时钟对象
selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型，仅baseLayerPicker设为true有意义
imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组
selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义
terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组
// imageryProvider : new Cesium.OpenStreetMapImageryProvider( {
// credit :'',
// url : '//192.168.0.89:5539/planet-satellite/'
// } ),//图像图层提供者，仅baseLayerPicker设为false有意义
terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者，仅baseLayerPicker设为false有意义
// skyBox : new Cesium.SkyBox({
// sources : {
// positiveX : 'Cesium-1.7.1/Skybox/px.jpg',
// negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',
// positiveY : 'Cesium-1.7.1/Skybox/py.jpg',
// negativeY : 'Cesium-1.7.1/Skybox/my.jpg',
// positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',
// negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'
// }
// }),//用于渲染星空的SkyBox对象
fullscreenElement : document.body,//全屏时渲染的HTML元素,
useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true
targetFrameRate : undefined,//使用默认render loop时的帧率
showRenderLoopErrors : false,//如果设为true，将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置
contextOptions : undefined,//传递给Scene对象的上下文参数（scene.options）
sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式
mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系
dataSources : new Cesium.DataSourceCollection()
//需要进行可视化的数据源的集合
});
// 定位到某个点位上
const boundingSphere = new Cesium.BoundingSphere(
Cesium.Cartesian3.fromDegrees(120.55538, 31.87532, 100),
200, // 控制高度
);
viewer.camera.flyToBoundingSphere(boundingSphere, {
// 动画，定位到初始位置的过渡时间，设置成0，就没有动画
duration: 0,
});
// 将地图默认显示的文字和logo 隐藏掉
viewer._cesiumWidget._creditContainer.style.display = "none";
// 文字颜色
const _textColor = "rgb(11, 255, 244)";
let shuj = [
{
id:1,
name: '广告牌1',
j: 120.5552,
w: 31.87532,
img: '/assets/true.jpg'
},
{
id:2,
name: '广告牌2',
j: 120.5554,
w: 31.87632,
img: '/assets/Icon_.png'
},
{
id:3,
name: '广告牌3',
j: 120.55238,
w: 31.87432,
img: '/assets/Icon_.png'
},
{
id:4,
name: '广告牌4',
j: 120.55338,
w: 31.87732,
img: '/assets/wux.png'
},
{
id:5,
name: '广告牌5',
j: 120.55538,
w: 31.87732,
img: '/assets/k.jpg'
},
{
id:6,
name: '广告牌6',
j: 120.55538,
w: 31.87432,
img: '/assets/Icon_.png'
},
{
id:7,
name: '广告牌7',
j: 120.55438,
w: 31.8754,
img: '/assets/true.jpg'
}
]
for(let i = 0; i < shuj.length; i++){
// 添加实体
viewer.entities.add({
id: shuj[i].id, // id 为唯一的
name: shuj[i].name, // 名字
position: Cesium.Cartesian3.fromDegrees(shuj[i].j, shuj[i].w), // 广告牌在地图上的位置,@params(经度{Number},维度{Number},高度{Number})
billboard: {
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 广告牌的对齐方式
image: shuj[i].img, // 图片需要放在public/assets下
width: 18,
height: 24,
},
// 图标下的点 pixelSize为大小
point: {
pixelSize: 5
},
// 标签名
label: {
// show: false,
text:shuj[i].name,
font: "12px monospace",
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// fillColor: Cesium.Color.LIME,
fillColor: Cesium.Color.fromCssColorString(_textColor),
outlineWidth: 4,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
pixelOffset: new Cesium.Cartesian2(0, -25), // 偏移量 文字处于 (1,2) 1、正为右，负为左，2、上为负，下为正
},
});
}
// 点击广告牌的事件
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
let leftclick = Cesium.ScreenSpaceEventType.LEFT_CLICK;
viewer.screenSpaceEventHandler.removeInputAction(leftclick);
// 鼠标左键事件
handler.setInputAction((e) => {
let pickObj = viewer.scene.pick(e.position,3, 3);
console.log(pickObj);
// 判断是否点击到地图上的图标
if(Cesium.defined(pickObj)){
if(pickObj.id && pickObj.id instanceof Cesium.Entity){
console.log(pickObj.id._position._value);
// text.value = pickObj.id._name
// 将地图的经纬度转换成在画布的位置坐标
var winpos = viewer.scene.cartesianToCanvasCoordinates(pickObj.id._position._value);
// 调用显示的方法
showInfo(viewer.entities.getById(pickObj.id.id),winpos);
// viewer.trackedEntity = viewer.entities.getById(pickObj.id.id); // 点击实体拉近与实体的距离
}
}else{
hideInfo()
}
}, leftclick);
})
// 显示信息
function showInfo(entity,winpos) {
var info = document.getElementById("info");
// 对位置进行定位
if(winpos) {
info.style.left = (winpos.x).toFixed(0) + 'px';
info.style.top = (winpos.y - 120).toFixed(0) + 'px';
}
// 显示框里的内容
info.innerHTML = '';
info.innerHTML = entity.name;
info.style.display = 'block';
}
function hideInfo() {
var info = document.getElementById("info");
info.style.display = 'none';
}
return {
text
}
}
}
</script>
<template>
<div id="cesiumContainer">
<div id="info"></div>
</div>
</template>
<style scoped>
body{
position: relative;
}
#cesiumContainer{
width: 90vw;
height: 90vh;
margin: 0 auto;
}
#info {
position: absolute;
width: 100px;
height: 100px;
z-index: 1000;
display: none;
background: rgba(255, 255, 255, 0.5);
border: 2px solid greenyellow;
border-radius: 4px;
}
/* #look{
width: 200px;
height: 200px;
background: yellow;
opacity: 0.2;
} */
</style>
1582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
