使用vue3+vite+cesium，在地图上显示图标，并且点击实体弹出消息框

安装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 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>

效果图

拉近的效果

使用vue3+vite+cesium，在地图上显示图标，并且点击实体弹出消息框相关推荐

ASP.NET中WEB上弹出消息框的N种方法（为了以后方便，转了很多网友的文章！希望不会介意）...
ASP.NET中WEB上弹出消息框的N种方法第一个确定之后跳转到另一页面,第二个确定之后返回前一页 Response.Write("<script langage='javascri ...
上传文件大小超过服务器限制是什么意思,求助：文件上传当文件大小大于限制时弹出提示框...
if (FileUpload1.PostedFile.ContentLength > 1024 * 1000 * 4) { str = "上文件大小超过限定值!(最大" + ...
图片上传时，QQ浏览器会弹出下载弹框的解决方案
在做这次的欢乐购车季项目中,出现了一个以前没有遇到的问题,就是点击上传按钮,QQ浏览器会弹出下载框,非常讨厌.从网上查了很多资料,虽然大家对QQ浏览器带给前端的麻烦是深恶痛绝,但是没办法,还得想办法解 ...
在谷歌地图上显示您的位置
HTML5 Geolocation(地理定位)用于定位用户的位置. 亲自试一试:在谷歌地图上显示您的位置定位用户的位置 www.binblog.cn HTML5 Geolocation API 用于 ...
html5获取我的位置并在百度地图上显示
html5获取我的位置并在百度地图上显示一.前言二.在线演示和GitHub源码一.前言最近有兴趣研究了下移动端的地图api,发现其实挺简单的,HTML5也提供了地理位置API:Geolocat ...
小程序里显示店铺地址，可在地图上查看，可点击导航到店铺
老规矩,先看效果图可以在地图上显示店铺位置,地址,联系方式点击位置可以调起导航功能第一步,获取经纬度因为小程序内置的是腾讯地图,所以你需要到腾讯地图上查询经纬度. 首先,你要明确一个事情,任何 ...
门店定位怎么在地图上显示_怎样让自己的店地理位置显示在高德地图上
展开全部高德地图软件中进行新增地点提交,数据审核32313133353236313431303231363533e78988e69d8331333365666163后会尽快在地图上标注.目前不是所有 ...
python百度地图和租房信息_python爬虫租房信息在地图上显示的方法
选择工作地点: 选择通勤方式: 公交+地铁地铁走路骑车导入房源文件: 开始 var map = new AMap.Map("container", { resizeEnab ...
echarts 地图和柱状图结合（在地图上显示柱状图）
如图,需求要做一个在地图上显示柱状图的echarts图,但是百度了半天,发现很少有人发这种例子.这个代码也是借鉴的别人的文章,但需求肯定不完全一致,那我会根据我的需求把代码和注意事项发出来并解释.(如 ...
ECharts如何制作省份地图并在地图上显示自定义图标/散点图
之前一直被客户提的一个需求烦恼着,他要只显示某个省份的地图,并且呢要在地图上显示小车的图标,还有其它一些点的信息.我以前只用过echarts做过图表,没做过地图,所以自己也是网上看了很多并且看了很多a ...

使用vue3+vite+cesium，在地图上显示图标，并且点击实体弹出消息框

使用vue3+vite+cesium，在地图上显示图标，并且点击实体弹出消息框相关推荐

最新文章

热门文章