cesium 经纬度绘制点_Cesium搜索经纬度并标点

该博客介绍了如何在 Cesium 中使用经纬度进行点的标注。首先,通过输入经纬度,验证其格式,支持两种格式:①120,30 和 ②120°11'11",30°11'11"。接着,如果格式正确,清除已有标注并在地球上相应位置标点,同时调整相机视角飞往该点。博客还详细讲解了经纬度范围验证及坐标转换的逻辑。" 50958915,2961613,深入理解JNI:C与Java混合编程实战,"['C语言', 'JNI', 'Java']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

思路: 先输入经纬度,然后判断经纬度的格式,如果格式正确的话 就拿到输入的经纬度 在地球上对应的位置去标点 并且相机的位置中心也飞往该点

先实现标点 相机中心点

showPoints(lng, lat) { // 接受两个参数 lng经度 lat纬度

this.viewer.entities.removeAll() //先清除地球上的标点

console.log(this.viewer.entities)

if(this.viewer.entities.values.length === 0) { //清除完成后地球上没有其他点位了

var entity = this.viewer.entities.add({

position: this.Cesium.Cartesian3.fromDegrees(lng, lat),

/*point: {

color: Cesium.Color.RED,    //点位颜色

pixelSize: 10                //像素点大小

},*/billboard: {

image: marker

},

label : {

text : '测试名称',

font : '14pt Source Han Sans CN',    //字体样式

fillColor: this.Cesium.Color.BLACK,        //字体颜色

backgroundColor: this.Cesium.Color.AQUA,    //背景颜色

showBackground:true,                //是否显示背景颜色

style: this.Cesium.LabelStyle.FILL,        //label样式

outlineWidth : 2,

verticalOrigin: this.Cesium.VerticalOrigin.CENTER,//垂直位置

horizontalOrigin: this.Cesium.HorizontalOrigin.LEFT,//水平位置

pixelOffset:new this.Cesium.Cartesian2(10,0)            //偏移

}

})

this.viewer.camera.flyTo({ //相机飞往该点

destination: this.Cesium.Cartesian3.fromDegrees(lng, lat, 500000), //摄像机的最终位置

duration: 2})

}

},

再实现搜索功能

我的需求是接受两种格式  ①120,30   ②120°11'11",30°11'11"   前面是经度 后面是纬度 经度范围是  -180——180  纬度方位是-90——90

需要验证的东西比较多

search() {

//定位的实现

console.log(this.inputText)

var times = (this.inputText.match(/,/g)||[]).length;

if(times === 1) {

// 判断 ',' 出现的次数

console.log('可以继续')

console.log(this.inputText.split(','))

var timesArr = this.inputText.split(',')

if(timesArr.length === 2) {

if(time

### 绘制线段 为了在 Cesium根据经纬度坐标绘制线段,可以利用 `Cesium.Polyline` 实体来实现这一目标。通过设置 polyline 的 positions 属性为包含两个的世界坐标数组,即可完成线段的定义[^1]。 下面展示一段 JavaScript 代码示例,这段代码展示了如何初始化 Cesium Viewer 添加一条连接指定起和终位置的线段: ```javascript // 初始化 Cesium Viewer 对象绑定到 HTML 页面上的 'cesiumContainer' div 元素上 var viewer = new Cesium.Viewer('cesiumContainer'); // 定义起始和结束的位置信息 (经度,纬度,高度),单位分别为 度 和 米 var startLonLatHeight = [-72.0, 40.0, 0]; // 起始:纽约附近某处地面位置 var endLonLatHeight = [-117.0, 32.0, 0]; // 结束:洛杉矶附近某处地面位置 // 将 WGS84 坐标转换成 Cartesian3 类型表示的空间直角坐标系下的向量 var startPos = Cesium.Cartesian3.fromDegrees(...startLonLatHeight); var endPos = Cesium.Cartesian3.fromDegrees(...endLonLatHeight); // 创建 Polyline 图形对象将上述两地作为其路径端 viewer.entities.add({ name : 'Line from New York to Los Angeles', polyline : { positions : [startPos, endPos], width : 5, material : Cesium.Color.RED.withAlpha(0.7), clampToGround : true } }); // 刷新视图以显示新添加的内容 viewer.zoomTo(viewer.entities); ``` 此代码片段实现了从东海岸至西海岸跨越美国大陆的一条红色线条渲染效果,且这条线路会紧贴地球表面进行描绘。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值