Cesium：向地图中添加点的方法
2024-05-11 10:39:09
需求：在地球上点击一个位置，自动在地球上加一个点
方法代码：
let AddPoint = function (params) {if(params.lon === undefined || params.lat === undefined){alert('请提供经纬度!');return;}let entity = new Cesium.Entity({id: params.id || `${params.lon}点`,name:params.name || '点',show:true,position:Cesium.Cartesian3.fromDegrees(params.lon, params.lat),point:new Cesium.PointGraphics ( {show : true,pixelSize : params.pixelSize || 5,heightReference : params.pixelSize || Cesium.HeightReference.NONE,color : params.color || new Cesium.Color ( 255 , 255 , 0 , 1 ),outlineColor : params.color || new Cesium.Color ( 0 , 0 , 0 , 0 ),outlineWidth : params.outlineWidth || 0,scaleByDistance : params.scaleByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),translucencyByDistance : params.translucencyByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),distanceDisplayCondition : params.translucencyByDistance || new Cesium.DistanceDisplayCondition(0, 4.8e10),} )});viewer.entities.add(entity);return entity;
}
参数说明：
id: 实体ID
name: 实体name
lon: 经度 required
lat: 纬度 required
pixelSize: 点的大小，以像素为单位
heightReference: 相对于地面的位置
color: 点的颜色
outlineColor: 外边框颜色
outlineWidth: 外边框大小
scaleByDistance: 不同距离缩放比
translucencyByDistance: 不同距离透明度
distanceDisplayCondition: 显示的范围
heightReference:表示相对于地形的位置。
1. Cesium.HeightReference.CLAMP_TO_GROUND 该位置固定在地形上。
2. static constant Cesium.HeightReference.NONE 该位置是绝对的。
3. static constant Cesium.HeightReference.RELATIVE_TO_GROUND 位置高度是指地形上方的高度。
实例
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="Cesium-1.66/Build/Cesium/Widgets/widgets.css"><style>#map3d{height: 400px;width: 600px;background-color: red;margin:0 auto;}</style>
</head>
<body>
<div id="map3d"></div>
</body>
<script src="Cesium-1.66/Build/Cesium/Cesium.js"></script>
<script>viewer = new Cesium.Viewer('map3d', {selectionIndicator: false,animation: false,baseLayerPicker: false,timeline: false,sceneModePicker: true,navigationHelpButton: false,useDefaultRenderLoop: true,showRenderLoopErrors: true,fullscreenButton: false,infoBox: false,imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"})});viewer._cesiumWidget._creditContainer.style.display = "none";viewer.camera.setView({destination:Cesium.Cartesian3.fromDegrees(116.46,39.92,10000000.0),}); // 设置初始位置let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);handler.setInputAction(function(event) {var earthPosition = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);if (Cesium.defined(earthPosition)) {let ellipsoid = viewer.scene.globe.ellipsoid;let cartographic = ellipsoid.cartesianToCartographic(earthPosition);let lat = Cesium.Math.toDegrees(cartographic.latitude);let lon = Cesium.Math.toDegrees(cartographic.longitude);let params = {id:'测试'+lon,name:'text',lon:lon,lat:lat};alert = AddPoint(params);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
<script>let AddPoint = function (params) {if(params.lon === undefined || params.lat === undefined){alert('请提供经纬度!');return;}let entity = new Cesium.Entity({id: params.id || `${params.lon}点`,name:params.name || '点',show:true,position:Cesium.Cartesian3.fromDegrees(params.lon, params.lat),point:new Cesium.PointGraphics ( {show : true,pixelSize : params.pixelSize || 5,heightReference : params.pixelSize || Cesium.HeightReference.NONE,color : params.color || new Cesium.Color ( 255 , 255 , 0 , 1 ),outlineColor : params.color || new Cesium.Color ( 0 , 0 , 0 , 0 ),outlineWidth : params.outlineWidth || 0,scaleByDistance : params.scaleByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),translucencyByDistance : params.translucencyByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),distanceDisplayCondition : params.translucencyByDistance || new Cesium.DistanceDisplayCondition(0, 4.8e10),} )});viewer.entities.add(entity);return entity;}
</script>
</html>
运行结果
Cesium：向地图中添加点的方法相关推荐
- 百度地图API （1）:往地图中添加标注点
1.实现功能:通过给定的坐标点,往地图中添加标注点,点击标注点,显示改点的详细信息. 2.效果图: 演示链接:http://www.ltbetter.com:8080/BMap/MapTest1.ht ...
- ArcGIS教程：如何向地图中添加图层
每个图层都会引用存储在地理数据库.coverage.shapefile 和栅格等中的数据集.向地图中添加图层很简单,只需选择某个数据集并将其从目录 或搜索 窗口拖到地图中,或者使用添加数据按钮即可添加 ...
- springboot在工具类中添加service的方法，显示为空的解决方案
springboot在工具类中添加service的方法,显示为空的解决方案 参考文章: (1)springboot在工具类中添加service的方法,显示为空的解决方案 (2)https://www. ...
- php xml 添加节点 出问题,PHP往XML中添加节点的方法
本文实例讲述了PHP往XML中添加节点的方法.分享给大家供大家参考.具体方法如下: 1. contacts.xml代码 复制代码 代码如下: J J J Manager National 1971-1 ...
- ppt怎么加注解文字_PPT怎么在演示稿中添加批注的方法
PPT怎么在演示稿中添加批注的方法 2017-10-24 16:46 责任编辑:老王啊 导读 / PPT如何在演示稿中添加批注?设计或制作PPT时,会遇到内容中需要特别解释或着重注意的地方,此时会用到 ...
- 在3dmax软件中添加样条的方法和详细步骤
在3dmax软件中添加样条的方法和详细步骤! 在3dmax软件中添加样条的方法和详细步骤!三dsMax是一款三建模.动画和渲染软件.借助3dsMax,可以创造一个宏伟的游戏世界,布彩的场景,实现设计可 ...
- java窗体中添加图片_在java窗体程序中添加图片的方法
在java窗体程序中添加图片的方法 发布时间:2020-06-16 11:24:13 来源:亿速云 阅读:148 作者:Leah 这篇文章主要为大家详细介绍了在java窗体程序中添加图片的方法,图文详 ...
- linux服务器怎么添加路由,linux系统中添加路由的方法
linux系统中添加路由的方法 发布时间:2020-06-17 11:38:59 来源:亿速云 阅读:95 作者:Leah 这篇文章将为大家详细讲解有关linux系统中添加路由的方法,小编觉得挺实用的 ...
- AD 2020中添加LOGO的方法
AD 2020中添加LOGO的方法 前言 AD2020最新版PCB设计中安装logo的具体方法 一.安装脚本 文件名称:AD脚本文件 链接:https://pan.baidu.com/s/1s0TIp ...
- html表格中添加超链接,Excel表格中添加超链接的方法教程
在我们使用Excel表格的过程中,有时候需要为表格内的内容添加网站地址的超链接,以方便引入相关的内容,这个时候,我们就需要使用到添加超链接的知识了.那么,怎么在Excel表格内添加超链接呢?接下来由学 ...
最新文章
- boxFilter 滤波器实现
- 资深专家给.NET初学者的学习建议（转）
- Redis 入门笔记
- C 冒泡排序及其非常非常非常简单的优化
- 宇宙十大不为人知的事情
- Linux 命令之 timedatectl -- 查看系统当前时区设置
- 東方 project 联机版开发日记（1）
- java code_Alibaba Java Code Guidelines 插件使用教程
- C#：使用ListView动态添加数据一直闪烁的解决办法
- python语言-Python语言介绍
- Cobalt Strike Malleable C2
- openeuler 21.3 : 使用LVM管理硬盘
- (十)打包和项目部署
- L1正则化与L2正则化详解
- 记一次APP去壳破解重新打包
- 世界多国尝试弃用美元 滥用霸权、转嫁危机恐将自食其果
- 题海精华——算法题精选
- UML 类图 StarUML---推荐一款UML工具(很好很强大)
- Sanliao智能家居平台软件设计
- 51Nod_1265 四点共面【混合积】