前端:Cesium
cesium是一个跨平台、跨浏览器的展示三位地球和地图的js库
cesium使用WebGL来进行硬件加速图形,不需要任何插件支持,但浏览器必须支持webgl
zy123698745
这个作者很懒,什么都没留下…
展开
-
Cesium知识点:根据经纬度获取高程
// 根据经纬度获取高度function getHeigthByLonLat(lon = 87.5968, lat = 43.8084){ var positions = Cesium.Cartographic.fromDegrees(lon,lat); var promise = new Cesium.sampleTerrain(viewer.terrainProvider, 13, [positions]); promise = Cesium.sampleTerrainMostDetailed.原创 2020-06-16 14:45:25 · 5685 阅读 · 3 评论 -
Cesium知识点:监测目标是否在地球的可见端(3D)
var targetPosition =target.position;var isVisible = new Cesium.EllipsoidalOccluder(Cesium.Ellipsoid.WGS84, viewer.camera.position).isPointVisible(targetPosition);原创 2020-03-11 09:35:55 · 1513 阅读 · 0 评论 -
Cesium鼠标事件(一)
鼠标事件var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);删除事件handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);左键单击事件handler.setInputAction(function(cl...原创 2019-12-04 16:36:51 · 973 阅读 · 0 评论 -
Cesium热力图:在cesium中实现热力图
原理:使用heatmap.js插件,先生成一个热力图,再在地图上创建一个盒子(如矩形),以纹理的形式把热力图填充到矩形中。1、首先下载heatmap.js插件,自己随意写了一个热力图的方法,传入热力图所需参数max和data// 创建热力图function createHeatMap(max, data) { // 创建元素 var heatDoc = documen...转载 2019-10-30 10:01:06 · 3020 阅读 · 0 评论 -
Cesium(Geometry):各种GeometryInstance的添加方法
Cesium.Math.setRandomNumberSeed(1234);var viewer = new Cesium.Viewer('cesiumContainer');var scene = viewer.scene;var primitives = scene.primitives;var solidWhite = Cesium.ColorGeometryInstanceAtt...转载 2019-10-30 09:57:06 · 7352 阅读 · 3 评论 -
Cesium(Geometry):合并几何体并设置几何体材质
var scene = viewer.scene; var instances = [];instances.push(new Cesium.GeometryInstance({ id:"test1", geometry: new Cesium.PolylineGeometry({ positions: Cesium.Cartesian3.fromDegreesArrayHeigh...原创 2019-10-30 09:44:10 · 2237 阅读 · 1 评论 -
Cesium3D模型(二):创建3D模型,自定义模型旋转角度
// 创建模型var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(_lon,_lat,_height));var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({ url : '/cesium/...原创 2019-10-30 09:32:52 · 2689 阅读 · 1 评论 -
Cesium坐标转换:根据距离方向和观察点计算目标点
/** * 根据距离方向和观察点计算目标点(109.878321 19.963493 82 0 500) * @param {Object} lon 经度 * @param {Object} lat 维度 * @param {Object} height 高度 * @param {Object} direction 方向 * @param {Object} radius 可视距离 ...原创 2019-10-30 09:27:00 · 3409 阅读 · 2 评论 -
Cesium坐标转换:cesium矩阵和方位角heading ,pitch, roll的相互转换
// 假设当前模型的经纬度坐标为{114, 30, 1000} 方位角{heading: 30, pitch: 20, roll: 10} 都是角度来计算 // 1. 根据坐标, 方位角计算世界矩阵 var position = Cesium.Cartesian3.fromDegrees(114, 30, 1000); var h...转载 2019-10-30 09:11:26 · 3902 阅读 · 5 评论 -
Cesium坐标转换:已知两点,计算以一个点为圆心,将另一个点旋转一定度数后的新点的坐标/position_A绕position_B逆时针旋转angle度(角度)得到新点
//position_A绕position_B逆时针旋转angle度(角度)得到新点function rotatedPointByAngle(position_A, position_B, angle) { //以B点为原点建立局部坐标系(东方向为x轴,北方向为y轴,垂直于地面为z轴),得到一个局部坐标到世界坐标转换的变换矩阵 var localToWorld_Matrix =...转载 2019-10-30 09:08:26 · 1447 阅读 · 0 评论 -
Cesium坐标转换:根据两个坐标点(坐标点a、坐标点b)的经纬度,计算a点和b点的角度
计算a点和b点的角度(偏行角:逆时针) /** * 计算a点和b点的角度(偏行角) * @param lng_a a点经度 * @param lat_a a点维度 * @param lng_b b点经度 * @param lat_b b点维度 * @returns 角度 */function courseAngle(lng_a, lat_a, lng_b, lat_b)...原创 2019-10-29 13:49:39 · 5418 阅读 · 4 评论 -
Cesium实例(一):在地图上绘制正六边形
在地图上绘制六边形:模拟电磁辐射情况,在地图上某一区域绘制电磁辐射的六边形,并根据辐射范围更改六边形的颜色;绘制思路:1、先绘制多个电磁辐射点;2、再绘制电磁辐射区域;3、在电磁辐射区域中任意找一个坐标点绘制一个正六边形,根据正六边形的中心点及任意两点的坐标可以得到正六边形中心点到六边形边线的经纬度的差值;4、根据经纬度的差值计算得到区域内部可以绘制的正六边形的中心点坐标,并绘制正六边形...原创 2019-08-02 10:27:01 · 3164 阅读 · 1 评论 -
Cesium学习(一):初始化地图影像信息
// 初始化地图影像信息 function initialGlobeView() { // 离子/资源访问令牌 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NjRjNGFjNy1jNDM3LTQzMTktODVlYS05YmFmOTAxYjk5MWUi...转载 2019-06-10 11:38:19 · 1490 阅读 · 0 评论 -
Cesium零散知识点(配置项、坐标转换、计算地形、定位)
// 鼠标点击监听位置 function initPosition(){ // 1、屏幕坐标(鼠标点击位置距离canvas左上角的像素值) var handler= new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction(function (movement) { // c...原创 2019-06-10 11:38:57 · 1205 阅读 · 0 评论 -
Cesium学习(三):加载默认线条
// 加载默认线条 function initShowLine(){ var objId = "line_one"; var positions = [ {x: -2027365.029498278, y: 5643501.100524499, z: 2165534.2688970272}, {x: -2031395.0770982248, y: 5642066.230...原创 2019-06-10 11:39:32 · 1673 阅读 · 1 评论 -
Cesium学习(四):运动中的实体对象
// 运动中的实体对象初始化方法 function initRunEntity(){ // 车辆默认不运行 viewer.clock.shouldAnimate = false; // 创建czml文件;得到czml数据源 var czml = getCzmlDataSource(); // 动态添加点到czml的路径中 // addPointForCzml(...原创 2019-06-10 11:40:56 · 2748 阅读 · 0 评论 -
Cesium知识点(一):实体对象的获取、删除
添加实体 var radarEntity = viewer.entities.add({ id: 'radar', name: 'radar', position: Cesium.Cartesian3.fromDegrees(109.8, 19.997), rectangularSensor: new Cesium.RectangularSensorGraphics({ r...原创 2019-06-11 11:11:43 · 11079 阅读 · 0 评论 -
Cesium应用CZML(一):CZML数据源创建点
/** * CZML数据源创建点 * @param {Object} point 经纬度坐标点:[109.740, 19.997, 0] */function creatPoint(point){ // 创建czml文件;得到czml数据源 pointCzml = getCzmlPoint(point); // 加载提供的URL或CZML对象,替换任何现有数据。 var dataS...原创 2019-06-14 14:13:58 · 3113 阅读 · 0 评论 -
Cesium应用CZML(二):CZML数据源创建线
/** * CZML数据源创建线 * @param {Object} polyLinePositions 经纬度坐标点数据集合(多个坐标点组成一条线):[109.740, 19.997, 500, 109.860, 19.997, 500] */function creatLine(polyLinePositions){ // 创建czml文件;得到czml数据源 var czmlLi...原创 2019-06-14 14:15:19 · 2565 阅读 · 0 评论 -
Cesium3D模型(一):创建3D模型
// 将经纬度坐标转换为三维空间坐标 var position = Cesium.Cartesian3.fromDegrees(109.740, 19.997, 0.0); // 实际创建实体 var entity = viewer.entities.add({ //模型所在位置 position: position, //加载铯平面模型以表示实体 model: {...原创 2019-06-14 15:23:05 · 1260 阅读 · 0 评论 -
Cesium零散知识点(二):运动中的实体对象
/** * 运动中的实体对象 * @param {Object} entity 实体对象 * @param {Object} pointArr 运行轨迹线上的经纬度坐标点数组 */function runEntity(entity, pointArr){ // 设定模拟时间的界限 var start = Cesium.JulianDate.fromDate(new Date(2015...原创 2019-06-14 15:51:22 · 1436 阅读 · 0 评论 -
Cesium动态纹理(一):区域放大扫描
转载于:https://www.yueyanshaosun.cn/ysCesium/views/31_ysc_addScan1.html// 区域放大扫描初始化方法function initData(longitude, latitude){ // 防止移动、放大缩小会视觉偏移depthTestAgainstTerrain // 设置该属性为true之后,标绘将位于地形的顶部;如果设为f...转载 2019-06-17 16:44:07 · 4040 阅读 · 0 评论 -
Cesium动态纹理(二):区域雷达扫描
转载于:https://www.yueyanshaosun.cn/ysCesium/views/31_ysc_addScan2.html// 雷达扫描初始化方法function initData(longitude, latitude){ // 防止移动、放大缩小会视觉偏移depthTestAgainstTerrain // 设置该属性为true之后,标绘将位于地形的顶部;如果设为fal...转载 2019-06-17 16:51:21 · 7608 阅读 · 7 评论 -
Cesium学习(四):运动中的实体对象(汽车)
运行的车辆<!DOCTYPE html><html lang="en"><head> <!-- 使用正确的字符集。 --> <meta charset="utf-8"> <!-- 告诉IE使用最新最好的版本。 --> <meta http-equiv="X-UA-Compatibl...翻译 2019-06-10 11:41:35 · 2789 阅读 · 0 评论