2023-02-09

HTML

2023-02-06

VS Code

好用！伟大的文本编辑器！（雾

今后如果跳槽前端的话，VS code基本是主力开发工具了

就其特点来说，开源、free、Cross-platform（多平台下一致的交互体验）、高性能、轻量化（cue的就是eclipse那种IDE，相对笨重一些。

上一次舔微软已经是地平线5发布的时候了，今天呢无疑要叨上几句关于VS code

它的理念，版本迭代、公测计划、extension，它的生态（国内我常看的就是新兴的掘金社区了），它自带的调试工具以及Git版本控制，强大的插件扩展（直接在VS Code里面搜索就行了，比如简中化Chinese extension），它的emmet，语法支持高亮括号匹配代码段提示，最近一个版本还更新了分块化代码（我以前都是插一句注释方便“回档”）

浅聊一下VS Code的组件（可跳过

开发框架

VS Code的开发框架选了Electron，没有上Qt，以至性能方面受限，微软也花了很多心思用C++去优化性能。下面是个人的一些近乎揣测的观点，微软选Electron有他更深刻的缘由，所以这里咱步子不妨迈小一点

我们需要明白一个道理，硬件固然重要，你有硬件，软件稀烂那是要吃大亏的，所以搞清楚自身定位，明确开发应用场景比较重要（我怎么像是在说任天堂，好在老任现在很清楚定位

跨平台相关

Electron的优势，微软在做长期规划中必然是考虑到了，譬如我工厂生产一口华夫饼机，我是不是应该让机器具备跨人群的特性，家庭用、商用，工业风也好美丽的皮囊也好，所以图一个适用性。Qt在MacOS上的支持不太好，自然会选择用Electron

易用性

Qt用C++ 、QML，较为底层，和系统打交道，适用于一些复杂系统，比如wps那种，以及军工系统。Electron用Html、CSS,JavaScript以及其他Web开发技术，上手比较快，开发一些大小适中的应用，在避免性能问题的情况下推进新项目比较方便。

快速迭代

Electron的开发周期要短于Qt不少的，包括及时地修改和部署

社区支持

社群生态太重要了，难道你吃螃蟹不蘸醋？

LSP

语言服务协议同样是VS Code的核心组件了，解释权交给微软（逃

语言服务器协议概述 - Visual Studio (Windows) | Microsoft Learn

关于VS Code就赘述这些吧，不想baba了

2022-04-26

cesiumjs-3d-tiles-styling

磁贴的样式语言

3D 切片样式语言允许您定义数据集中要素的显示方式的规则，例如建筑物的颜色或显示的建筑物类型。这有助于识别城市中的模式或创建信息更丰富的可视化。

样式是使用 JSON 和 JavaScript 表达式定义的。此外，样式语言还提供了一组支持常见数学运算的样式，例如、和。built-in functions ``min``distance``log

本指南包括 3D 磁贴样式语言的以下常用部分的示例：

样式选项和show``color
测试包括特征属性测试、空检查和点云中点的检查conditions``Classification
创建新变量defines
功能distance
创建新的颜色定义

什么是 3d 磁贴功能？

要素可以是单个建筑物、门、窗、阀门或点云中的点等要素。

应用基本样式

有两种常见的方法可以将样式应用于 3D 切片集：通过和颜色视觉属性。确定样式规则后，可以通过将 3D 切片集的成员变量设置为新的show ``style``Cesium3DTileStyle.

对于下面的代码片段，我们使用澳大利亚墨尔本的Cesium OSM建筑3D Tiles和Crown Entertainment Complex。规则是将名为“皇冠娱乐中心”的建筑物涂成红色，将所有其他建筑物涂成白色。CesiumJS将有效地将此规则应用于每个功能，替换该功能上的任何现有样式。我们选择的特征属性是，它已存在于数据集中。name

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ["${name} === 'Crown Entertainment Complex'", "color('red')"],
      ["true", "color('white')"],
    ],
  },
});

在沙堡开业

我们可以通过单击查看器中的功能来查看功能属性列表：

3D 磁贴样式名称属性

基于属性显示要素

除了着色之外，3D 磁贴样式语言还允许您根据要素的元数据属性显示和隐藏要素。

以下是墨尔本的所有建筑物，来自CesiumOSM建筑瓷砖集。

3D 磁贴样式显示所有建筑物

墨尔本之前只展示住宅楼。

假设我们想找到墨尔本的所有住宅楼，这些住宅楼在OSM建筑中被归类为“住宅”或“公寓”。building

1
2
3

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
  show: "${feature['building']} === 'residential' || ${feature['building']} === 'apartments'",
});

OPEN IN SANDCASTLE

3D Tiles styling showOnlyResidentialBuildings

墨尔本仅显示住宅楼。

颜色特征使用条件

您还可以使用条件来确定要为要素指定的颜色。

例如，您可能希望在墨尔本皇冠娱乐中心周围的区域为游客设计一条巴士路线。哪些建筑物在距离综合大楼的给定距离内？

此代码片段根据每个建筑物与皇冠娱乐中心的距离为其分配颜色：

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
  defines: {
    distanceFromComplex:
      "distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(144.96007, -37.82249))",
  },
  color: {
    conditions: [
      ["${distanceFromComplex} > 0.010", "color('#d65c5c')"],
      ["${distanceFromComplex} > 0.006", "color('#f58971')"],
      ["${distanceFromComplex} > 0.002", "color('#f5af71')"],
      ["${distanceFromComplex} > 0.0001", "color('#f5ec71')"],
      ["true", "color('#ffffff')"],
    ],
  },
});

在沙堡开业

3D 磁贴样式允许您定义阵列中的要素。conditions``color
条件的行为类似于 if 语句。
定义
表达式将创建新变量。
定义defines
distance是 3D 磁贴样式语言的一种。built-in function
支持 CSS 样式的颜色定义。
定义

上面的代码段生成以下样式结果：

3D 磁贴样式 osmBuildingColorByDistance

设置点云的样式

点云是遵循上述相同样式规则的点的集合，具有一些附加选项。

点云样式选项和属性

除了视觉属性之外，点云图块还支持。默认值为 1.0。color``show``pointSize``pointSize

在铯离子上平铺的 LAS 文件中的点云包括两个每点属性：和。Classification``Intensity

Classification是指向点的数据类型（如地面、低植被或建筑物）的整数映射。
Intensity 是点表面的反射率，即介于 0 和 255 之间的整数（包括 0 和 255）。

点云样式还可以应用于其他点属性，如位置、颜色和法线。例如，您可以使用元数据属性根据点云切片与中心点的距离创建点云切片的热图，类似于我们根据 OSM 建筑物与皇冠娱乐综合体的距离对 OSM 建筑物进行着色的方式（请参阅热图沙堡）。POSITION_ABSOLUTE

点云样式示例

假设您想可视化加拿大蒙特利尔生物圈博物馆周围的环境。样式规则是将点着色为绿色（如果其分类属性为植被）。

pointCloudTileset.style = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ["${Classification} === 2", "color('brown')"],       // ground
      ["${Classification} === 3", "color('greenyellow')"], // low vegetation
      ["${Classification} === 4", "color('green')"],       // medium vegetation
      ["${Classification} === 5", "color('darkgreen')"],   // high vegetation
      ["true", "color('white')"]
    ]
  }
});

在沙堡开业

应用样式规则后，我们可以想象博物馆周围环境中有多少是植被：

3D 瓷砖造型生物博物馆蒙特利尔PointCloud分类

处理未定义的属性

有时建筑物缺少属性。在这种情况下，我们可以添加一个检查器条件：null

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        ["${material} === null", "color('white')"],
        ["${material} === 'glass'", "color('skyblue', 0.5)"],
        ["${material} === 'concrete'", "color('grey')"],
        ["${material} === 'brick'", "color('indianred')"],
        ["true", "color('white')"],
      ],
    },
  });
}