Y's ugly blog

背景

某项目在演示过程中客户提出需要一个可在线查看类似xmind思维导图的功能。

技术选型

先简单分下如果手动实现一个思维导图需要用到什么技术。这种图形类的绘制一般有两种选择：svg和canvas，因为思维导图主要是节点与线的连接，使用与html比较接近的svg比较容易操作。成熟的svg库有很多，比如RaphaelJS、svgjs和snap。

由于要快速交付同时能力有限，主要考虑使用成熟开源的框架来实现对应功能。思维导图主要功能点包括下列几个方面

• 编辑节点（添加、删除、收缩、文字编辑等等）
• 选择节点（单选、多选）
• 画布操作（放大、缩小，拖拽、撤销重做）
• 功能丰富度（标签、关联线等等）

背景

最近公司有个大屏项目涉及到地图图表，设计图大概如下

正常来说只需要有GeoJSON数据和对应点的经纬度坐标信息Echarts是可以实现这样的效果，但是产品说客户只有矢量图而且也没有坐标信息。

那么就只能用SVG渲染地图，再手动添加一些额外点元素。而Echarts5.1版本后是支持使用SVG作为底图的，那就来试试吧

背景

ECharts是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。但是其每个图表的配置项繁杂，开发过程中免不了要经常查看说明文档。

那么如何在离线环境查看echarts文档呢？

背景

在某个项目中用到了 L7 地图，使用的是高德图层开发。但是在测试阶段突然发现最终项目是要部署在离线环境的，高德地图没法使用。没办法只能考虑在离线环境自己部一套地图系统。

默认已经安装了 docker，没有安装的自行安装docker

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。

本文以数据库为例做说明

具体实现

1. 在根目录创建Dockerfile 文件

1
2
3
4
5
6
7
8
9

FROM node:latest
COPY ./ /app
WORKDIR /app
RUN npm install && npm run build

FROM nginx
RUN mkdir /app
COPY --from=0 /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

本文是基于Vue3(vite)中使用cesium实现的优化方案，如果还没了解过如何在Vite中使用CesiumJS，请自行查看。

假设我们已经对如何在Vue3中使用CesiumJS有所了解，但还是有如下问题存在

• Vite 仍需对毫无修改的 cesium 依赖包打包一次，CesiumJS 已经在发布 npm 包时进行了构建，其虽然有 ESModule 格式的产物，但是并不支持 Tree-Shaking 减小大小，事实上也没有必要
• 需要手动复制 node_modules/cesium/Build/CesiumUnminified/ 下的四个静态资源文件夹
• 对多个发布环境仍需要手动修改 CESIUM_BASE_URL，如果切换到 CDN 或内网已有 CesiumJS 在线库资源，这个改起来就麻烦许多

需求分析

页面中显示需要标注的图片，鼠标绘制矩形进行标注(考虑到实际情况，可能还有多边形、圆形等等多种形状)。最后可以拿到标注的内容位置信息、标注信息等并且回显所有标注内容。在图片上进行绘制，首先想到的是用canvas，canvas强大的功能能让我们在图片上为所欲为。但是原生的canvas API众多且繁杂，上手不易，所以最好使用成熟的canvas框架来实现。

1、安装，这里应项目需要安装固定版本

1

npm install cesium@1.88 --save

2、在node_modules/cesium/Build下面复制Assets、ThirdParty、Widgets、Workers文件夹到public文件夹下面。

仅靠源代码是不能运行起 Cesium 三维地球场景的，必须使用构建版本的 CesiumJS 库。而官方构建后的 CesiumJS 库（即发布在 npm 上的 cesium 包）一定会包含以上四类文件，即 node_modules/cesium/Build/ 下的压缩和未压缩版本文件夹下的 Workers、Widgets、Widgets、Assets 四大文件夹。
CESIUM_BASE_URL 的作用，它就是告诉已经运行的 CesiumJS 上哪去找上述四类静态资源。

注意：Vite 开发服务器的根路径，除了挂载了工程的根目录，还挂载了工程根目录下的 public 目录，public 目录的作用请自己查阅 Vite 文档。

背景

出于保密原因后续业务需要内网环境开发，这就要优先解决前端依赖的问题。

方案

方案一

将依赖包下载到本地，然后本地安装
结论：不友好，而且只能通过文件夹来安装，麻烦
痛点： 前端项目依赖多且碎，比如开源依赖又依赖别的开源依赖

写在前面

首先浏览器并没有提供一个类似的API权限功能，所以只能某种方式来实现一个伪截图功能。

功能分析

简单分析一些截图软件可以得到了一下实现思路：

• 获取当前可视区域的内容，将其存储起来
• 为整个可视区域绘制蒙层
• 在获取到的内容中进行拖拽，绘制镂空选区
• 选择截图工具栏的工具，选择确认取消等信息
• 在选区内拖拽绘制对应的图形
• 将选区内的内容转换为图片

不难发现，难点就在于获取当前可视区域内容。

首先想到的技术就是canvas。将body文档内容绘制到canvas，然后利用canvas的toDataUrl()等方法即可获取到图片。