学无止境

# 前言 可缩放矢量图形的一大优势（除了它们可以被无限缩放而没有质量损失之外）是一旦你知道了基本的原理，无需打开绘图程序你就能很容易地手写出一些简单的形状。 只要很少的几行代码你就可以拥有你的自定义图标，而且你还很清楚每个图标是怎么组合出来的。当你创建自己的 SVG 时，你可以确保以最有效的方式来编写它们，并且当你在站点中使用它们时，你拥有最大的控制权。 在本教程中，我们将涵盖手写 SVG 的所有基本原理，但我不会用一个仅仅是丢出一系列相关形状和属性的文章来烦你们。相反，你们会通过实践来学习如何手写 SVG ，创建出本教程开头那张图片上所列的 6 个图标（在线示例）。在此过程中，你将会用到手写...

加班很烦，因为在下班后我有自己想做的事。 但不知道啥时候起，加班成了理所当然的事，为什么？ 还想吐槽一件事，提需求的人果然是最讨厌的。 想回学校了，想静下心来学习，搞科研。 晚安。

# 环境介绍 项目环境 版本 命令 NodeJs v12.18.3 node --version Npm v6.14.6 npm -v vue/cli v4.5.6 vue --version vue v2.6.12 npm list vue webpack v3.12.0 npm list webpack cesium v1.74.0 npm list cesium # 创建一个 Vue 项目 全局安装 vue/cli 和 vue/cli-init npm install -g @vue/clinpm install -g @vue/cli-init 创建一个基于...

# 最终效果 话不多说，先上效果 # 相关知识点 主要用到 CZML 相关知识 CZML 是一种用来描述动态场景的 JSON 架构的语言，主要用于 Cesium 在浏览器中的展示。它可以用来描述点、线、布告板、模型以及其他的图元，同时定义他们是怎样随时间变化的。 详情可看：CZML 介绍 我这里就不过多赘述了。 # 主要代码 var czml = [ { id: "document", name: "CZML Path", version: "1.0", clock: { interval:...

# model 的模型转向 var czml = [{ "id" : "document", "name" : "CZML Point - Time Dynamic", "version" : "1.0"},{ "id" : "point", "availability"...

# 前言 坐标转换相关文章可看：Cesium - 坐标系统详解 # 相关 API Cartesian3 相关 API 如下： API 说明 Cesium.Cartesian3.abs(cartesian, result) 计算绝对值 Cesium.Cartesian3.add(left, right, result) 计算两个笛卡尔的分量和 Cesium.Cartesian3.angleBetween(left, right) 计算角度 (弧度制) Cesium.Cartesian3.cross(left, right,...

# 最终效果 # 主要思路 添加数据模型 监听键盘按键 计算坐标 移动小车 # 相关代码 var scene = viewer.scene;// 旋转角度let radian = Cesium.Math.toRadians(3.0);// 移动速度let speed = 60;// 速度矢量let speedVector = new Cesium.Cartesian3();// 起始位置let position = Cesium.Cartesian3.fromDegrees(102.23292685840103, 27.825718192817853, 2500.0);//...

# 绘制线 # 效果展示 # 相关代码 // 定义当前场景的画布元素的事件处理var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);//...

# 安装参数详解 命令 解释 npm install module 安装某个 module 到本地项目的 node_modules，但不会把安装包的信息添加到 package.json 文件 npm install module --save 安装某个 module 到本地项目的 node_modules 文件夹，同时把相关模块依赖添加到 package.json 文件的 dependencies 中 npm install module --save-dev 安装某个 module 到本地项目的 node_modules 文件夹，同时把相关模块依赖添加到 package.json...

# 结果展示 # 相关代码 //-------------------------- 加载 GeoJson 数据 ------------------------------var fireLayer = null;var borderLayer = null;var roadLayer = null;viewer.dataSources.add(Cesium.GeoJsonDataSource.load('Assets/muli/muli_geojson/fire.geojson', { stroke:...