Jercky

Cesium方位角测量(仿火星科技)接着之前的通用工具介绍来讲，今天主要介绍方位角测量。仿照火星科技的例子实现，可以连续测量。先上图： 原理首先明白什么是方位角，百度百科介绍： 方位角，又称地平经度(Azimuth angle，缩写为Az)，是在平面上量度物体之间的角度差的方法之一。是从某点的指北方向线起，依顺时针方向到目标方向线之间的水平夹角。 从定义中得到几个关键信息： 两个点， 起点和目标点 两点间顺时针的水平夹角 根据上面的信息，想到的方法就是，根据起点建立一个 x东方向，y为北方向的局部坐标系(或者y为东，x为北)，计算出目标点在这个坐标系的局部坐标值，然后利用三角函数 arctan计算出夹角(图中角A的值)。 Cesium 中提供了建立局部坐标系的方法 以x为北，y东的局部坐标系 以y为北，x东的局部坐标系 实现核心代码如下： /** * 计算两个点的方位角度 * @param lng_a * @param lat_a * @param lng_b * @param lat_b * @return {number} */courseAngle ...

node-sqlite3简易后台搭建最近项目需要写一个演示用的三维Demo，其中要有用户管理界面，能对用户进行增删改查操作。当然这都是小需求，随便就写了，也没啥。但是给我说没人给我写接口（内心：嗯，嗯???)。虽然做过一段时间的全栈开发，突然让我写后台，我还是有点不适应。但是没办法，任务来了，干吧！之前写的是 Java + Mysql + SpringBoot 后台，但是一个简单的用户管理，再加一个登录的接口，我是真心不想用（其实忘了不少，不会了 哈哈）。作为一个 WebGIS 码农，最熟悉的还是 JavaScript 。那能用 Js 写后台的莫过于 Node了，再结合 express 库，很轻便的就可以搭建一个后台。接下来就是数据库了。目前，开源免费，又小巧轻便的 sqlite 多合适啊。 同时 Node 也有 sqlite3 JS库可以操作它。OK，技术选型定了，接下来就开始实现吧。 安装对应Node的安装和配置，各位道友了解的比我都清楚，我就不多说了。主要讲一下 sqlite3的安装 sqlite3 (windows)数据库安装 下载地址 https://www.sqlite. ...

Cesium点线面缓冲区实现上篇文章主要展示了我最近封装的一些常用工具，接下来几篇文章主要介绍相关功能的实现。这篇文章就介绍一下关于三维缓冲区的实现原理。 原理其实从事 Webgis 相关的道友都用过或者听过 turf.js 这个前端 GIS javascript分析库 (什么？没听过？ 道友，最近游戏红尘了吧，哈哈~), 中文文档地址。turf.js 提供了很多分析方法，具体我就不展开说了，一个是我了解的也不是很清楚，另一个就是人家写的很详细了，就不班门弄斧了。三维缓冲区和二维缓冲区实现方式是一样的，都是基于 turf.js 的 buffer 方法，传入相关的参数，然后将生成的 Feature 展示就行了。 buffer 方法 buffer 使用示例 实现参数很简单，一个是要缓冲的基础几何对象，一个是缓冲半径，默认是千米。基本的绘制交互就不说了，核心的代码如下： 点缓冲区/** * 创建点缓冲区 * */CesiumBufferUtil.prototype.createPointBuffer = function () { //添加点 this.addPoin ...

VueRouter原理与实现我们在平常的 Vue 项目开发中，应该都是用过 VueRouter 和 Vuex 这两个重要的插件。今天就主要研究一下 VueRouter 的是原理是什么，然后自己简单实现一个基础版本的 VueRouter。 VueRouter源码地址 原理VueRouter的流程 VueRouter 源码中工作流程大致以下几步： url 发生变化 触发 url 监听事件 赋值 router 中的 current变量 监听 current 变量发生变化。 获取 current 对应的组件 渲染组件 看过流程也就明白了 VueRouter 是 Vue 能实现单页面应用的核心。不同的路由切换，本质上就是不同的组件切换，最后渲染在页面上。 url 监听事件VueRouter 的模式有两种 hash 和 history。默认是 hash 模式。两个模式的获取值以及对应的监听事件是不是一样的： 模式 获取方式 监听事件 表示形式 hash location.hash hashchange http://localhost/#/index history ...

Vue响应式原理 Vue2和Vue3Vue 作为前端三大主流框架之一，它的数据驱动视图无疑是重大特点之一。9月18号尤大发布了 Vue3,它比上一版本运行更快，体积更小，也增加了 Composition API 组合式编程，支持 typeScript，优化了 DOM Diff 算法等一系列的优化。更加的趋向于 函数式编程。Vue 的知识点不少，今天就主要介绍响应式原理，看看 Vue2 和 Vue3 在这方面的区别。 Vue2 响应式或者说数据驱动视图的关键点在于我们如何知道数据发生了变化，即数据什么时候被读取或者被修改了。而这些， JavaScript 提供了 Object.defineProperty 方法，改方法能很轻松的达到观察数据变化的目的。 Object.defineProperty 让 Object 类型数据变得可观测 借助 Object.defineProperty 很容易实现，代码如下： let apple = {}let val = 5Object.defineProperty(apple, 'price', { ...

Cesium源码编译和调试(ES6)作为目前来说支持大场景，海量模型数据，LOD分级渲染的三维免费开源项目 Cesium 应该是最优选择了。 保持每个月更新一次的维护效率，加上各种社区的支持， Cesium 在未来很长一段时间内都会是最优的开源选择。 对于好的开源项目，大家都是会想了解它的原理是什么，它的代码是什么样的。哪些地方值我们学习。今天就详细介绍一下怎么编译和调试源码。 包的分类 预编译包 也就是我们在官网上看的js包 下载地址 这里面提供了打包之后的js库和示例以及文档。在这里面调试，打包会编译失败。 源码包 源码包打包之后是可以得到预编译包。如果想修改源码，就使用这个包。获取方式有两种。 git 安装git clone https://github.com/CesiumGS/cesium.git zip包下载 下载地址 编译运行 下载解压源码包之后，找到根目录(package.json同级)，然后安装模块 npm install // 国内较慢的道友们， 用cnpm 也可以cnpm install 编译命令 npm run releas ...

Cesium自定义Popup框在习惯了二维的Popup框之后，也想在三维里面有个。但是Cesium并没有封装过Popup框，有的只是一个悬浮固定位置的信息框，就是这样的： 显然这种框框展示，并不能满足狂拽酷炫diao炸天的特效，既然没有，那就照着二维的地图框架，自己整一个吧。先上图: 来个动的： 实现在做三维之前，那时候用的最多的是 MapBoxGL，所以我就以 MapBoxGL 的 Popup 为基础原型进行的封装。先说一下思路 用js来动态创建弹窗的基础DOM框架。包括弹出框的名称，弹窗内容，弹窗的底部尖尖头。 利用Cesium提供的实时帧渲染方法，来不停的修改弹出框的位置。 然后就是完善和丰富整个功能了。 创建面板代码： CesiumPopup.prototype.initPanle = function () { var closeBtnIcon = '<svg t="1603334792546" class="icon" viewBox="0 0 1024 1024" ...

Cesium的全景漫游(室内漫游)第一视角跟随 Cesium的示例中是有漫游的示例。但是角度并不是第一视角。如下图： 在对于特殊的需求中，比如室内漫游。如果不是第一视角，漫游的过程中会被室内其他物体遮挡，效果不好，也不切实际。因此需要在此基础上进行修改，以达到好的效果。 实现 在实际应用中，漫游的路线是规划好的。也就是一系列的坐标点，然后根据坐标点插值计算，平滑运动。获取的方式很多种，看实际项目需求。我是事先选取好的点。 var myPositions = [ [109.05832893717263, 37.441496598851096], [109.05855416786699, 37.44130123438769], //... [109.0587449465546, 37.44119249116668], [109.05845600554856, 37.441396645980845],]; 只有经纬度没有高度，因为我是把高度写死的，如果需要高度变化，是可以加上高度。 指定动画的起始时间，然后把 timeline 调整至起始时间，然后 ...