Erebus's Blog

前言 GeoJSON（地理 JSON）是一种开放的标准数据格式，用于表示地理信息和地理特征的地理数据。它基于 JSON（JavaScript Object Notation）格式，旨在用于描述地理和空间信息，例如地图数据、地理特征、地理坐标等。GeoJSON 通常用于 Web 地图应用、地理信息系统（GIS）、地理空间数据的存储和交换，以及其他与地理位置相关的应用。 GeoJSON 的主要特点包括： 地理特征：GeoJSON 允许表示各种地理特征，如点（Point）、线（LineString）、多边形（Polygon）、多点（MultiPoint）、多线（MultiLineString）、多边形集合（MultiPolygon）、几何集合（GeometryCollection）、特征对象（Feature）、以及特征集合（FeatureCollection）等。这使得它适用于各种地理数据的表示。 地理坐标：GeoJSON 使用经度和纬度坐标来表示地理位置。这些坐标通常使用 WGS 84 坐标系，这是一种广泛使用的地理坐标系。在国际上，每个坐标系统都会被分配一个 EPSG 代码，EPS ...

前言 通过上篇【Canvas 绘制 2D 图形】 我们知道了如何绘制简单的 Canvas，在需求场景中我们往往也需要在 Canvas 中绘制 GeoJSON (具体见 GeoJSON 是什么？ )数据的缩略图。下面以中国地图为例，绘制一个地图缩略图。【在线预览】 GeoJSON几何类型包括： Point // 点 MultiPoint // 多个点 LineString // 线 MultiLineString // 多条线 Polygon // 多边形 MultiPolygon // 多个多边形 FeatureCollection // 特征集合，主要是上面几种类型的集合，并且支持无限嵌套。 在本例子中我们需要用到这份数据 https://cdn.emooa.com/geojson/100000.json，集合类型为 MultiPolygon，部分数据如下： 123456789101112131415161718192021222324252627282930[ { "type": "MultiPolygon", ...

Canvas 是可以通过 JavaScript 脚本来绘制图形的 HTML 元素。我们可以使用 Canvas 绘制各种图形，包括线条、矩形、圆形、文本等。下面是一个简单的 Canvas 绘制图形的教程，包括基本的绘制操作和一些常见的用例。 Canvas 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。 在我们开始画图之前，我们需要了解一下画布栅格 canvas grid 以及坐标空间。我们假设一个宽度为 width，高度为 height 的 canvas 标签元素。canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素（坐标为（x,y）） 创建元素1<canvas id="emooa-canvas" width="400" height=&quo ...

不记得从哪儿看到这张动图了，这个 Switch 开关有两个主题，明亮，黑暗。当我们点击组件时候，会在太阳+白云和月亮+星星的不断切换来呈现，并且伴随着炫酷的动画。不得不说这个看起来十分的炫酷，但是通过 CSS 实现起来也是真的费劲，比较耗头发。【在线预览】 组件定义我们可以定义一个 button 按钮，添加 aria-checked=true、aria-checked=false 来代表当前是开、关的状态。 通过给 button 设置圆角 border-radius 和光晕 box-shadow 可以很好的实现外框样式。注意注意的是，按钮实际是一个内凹的细节，所以我们在配置光晕的时候应该设置为 inset。 123456789101112131415button { margin-top: 100px; margin-left: 50%; width: 390px; height: 146px; transform: translateX(-50%); box-shadow: 0 10px 8px 0 rgba(51, 83, 113, 0.26) inse ...

通过上篇【通过域名+服务器搭建一个最基础的网站】 我们知道了如何通过搭建自己的博客，接下来稍微介绍下如何通过工作流做自动化部署。 开始上篇中，已配置好 Nginx，并且当我们访问 https://blog.emooa.com 时，可以正确的访问到网站资源。 123456789101112131415161718192021server { listen 443 ssl; server_name blog.emooa.com; // 替换成实际的域名地址 ssl_certificate cert/blog.emooa.com.pem; // 替换成实际的 pem ssl_certificate_key cert/blog.emooa.com.key; // 替换成实际的 key ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!M ...

前期准备域名购买我目前主要是在这两个域名注册商购买域名。 国内域名需要实名购买，国外域名不需要。 用国内域名搭建网站，如果服务器在国内，需要备案，在国外或香港等地不需要备案。 用国外域名不需要备案。 国内域名 万网（阿里云） 官网地址：https://wanwang.aliyun.com商家介绍：万网依托于阿里云旗下，以前只要说起域名基本就是万网，相当靠谱。 国外域名 Dynadot 官网地址：https://www.dynadot.com商家介绍：国外域名注册商首选，有中文网站，支持支付宝付款，客服响应及时，免费隐私保护。 服务器购买 白嫖服务器 阿里云服务器 学生认证 9.9 元 亚马逊香港服务器 1 核 1GB 内存 免费 12 个月 注册需要绑定银行卡 racknerd 挺贵的，我买了。。 现在开始nginx 我安装的是ubuntu，打开命令行窗口，登录到服务器，比如当前为 root 用户，如果是其他用户记得加上 `sudo`` 1ssh root@*.*.*.* // 根据提示输入密码，建议注册新用户 安装nginx，具体见 ubu ...

常用方法 getWebGLContext // 获取 WebGL 绘图上下文 12const canvas = document.getElementById('webgl');const gl = getWebGLContext(canvas); clearColor // 指定清空 canvas 颜色 1gl.clearColor(0,0,0,1) clear // 清空 gl.COLOR_BUFFER_BIT // 颜色缓存区 gl.DEPTH_BUFFER_BIT // 深度缓冲区 gl.STENCIL_BUTTFER_BIG // 模版缓存区 1gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓存区，不是绘图区的canvas，clear 继承自OpenGL，基于基本缓存区模型。 initShaders // 初始化着色器 VSHEADER_SOURCE // 顶点着色器程序 FSHEADER_SOURCE // 片元着色器程序，可以理解成像素 1initShaders(gl, VSHEADER_SOUR ...

在 Mac 上安装 Git 可以通过以下几种方式： 通过 Xcode Command Line Tools 安装幸运的是，Mac 自带 Xcode Command Line Tools，其中包含 Git。打开终端 Terminal, 首次运行 git 命令即可。 12git --version 如果没有安装过命令行开发者工具，将会提示你安装，点击确认即可。 使用 Homebrew 安装如果您已经安装了 Homebrew，可以直接在终端中运行以下命令来安装 Git： 1brew install git 如果您还没有安装 Homebrew，请参考 Mac 安装 Homebrew 的正确姿势 从官方网站下载安装包您可以从 Git 官方网站下载安装包并按照安装向导进行安装。下载地址：https://git-scm.com/downloads 安装完成后，您可以在终端中运行 git --version，来验证 Git 是否成功安装。

Homebrew 是 mac 的包管理器，仅需执行相应的命令,就能下载安装需要的软件包，可以省掉自己去下载、解压、拖拽(安装)等繁琐的步骤。 比如安装服务器 nginx，打开终端执行以下命令即可安装。 那么，要在 Mac 上安装 Homebrew，您可以按照以下步骤进行操作： 在终端中，复制粘贴以下命令并按下回车键： 12/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 这个命令会下载并运行一个安装脚本，根据提示进行安装。 安装完成后，可以运行以下命令来验证 Homebrew 是否成功安装： 1brew --version 如果成功安装，会显示 Homebrew 的版本号。 现在，您已经成功在 Mac 上安装了 Homebrew。您可以使用 Homebrew 来安装各种软件包，例如 Git、Python 等。例如，要安装 Git，可以在终端中运行： 1brew install git

要在 Ubuntu 上安装 Nginx，你可以按照以下步骤进行操作： 更新包信息：打开终端窗口，并在其中运行以下命令来确保包信息是最新的： 1sudo apt update 安装 Nginx：在终端中运行以下命令来安装 Nginx： 1sudo apt install nginx 安装过程中，系统会要求你确认是否要安装 Nginx。输入Y来继续安装。 启动 Nginx：安装完成后，Nginx 会自动启动。如果没有自动启动，你可以使用以下命令手动启动 Nginx： 1sudo systemctl start nginx 设置 Nginx 自动启动（可选）：如果你想要 Nginx 在系统启动时自动启动，可以使用以下命令启用自动启动： 1sudo systemctl enable nginx 检查 Nginx 状态：确保 Nginx 正在运行，可以使用以下命令： 1sudo systemctl status nginx 如果 Nginx 正在运行，你将会看到相关信息。 配置防火墙（可选）：如果你的系统启用了防火墙（如 UFW），你可能需要允许 HTTP（端口 80）流量，以便外 ...