图书教辅抄写标注技术方案
输入“/”快速插入内容
图书教辅抄写标注技术方案
图书教辅抄写标注技术方案
飞书用户90983月9日修改
背景与需求
需求
项目是为众包平台和b 端后台提供的抄写标注组件，其中软件与硬件的抄写规范，因题目使用场景不同，存在较大差异。故本次需求将软件、硬件标注功能区分实现，避免重复工作和相互影响。
技术背景
原有的标注组件需根据 B 端业务要求进行修改，区分软件组和硬件组。
经评估，基于原有标注组件复制一份进行开发，理由如下：
为什么要复制开发：
1.
避免影响现有使用：软件组目前在使用旧版功能，直接修改可能会对其使用产生不必要的干扰或问题，因此需要确保新开发的功能不会影响现有系统的稳定性。
2.
接口更换：数据和流程已经不同，所有接口需要更换为我方自有接口。如果直接修改现有系统，可能会导致接口不兼容或冲突，复制开发可以确保新接口的集成不会影响现有系统。
3.
新增复杂功能：题目标注模块新增了复杂的切换大/小题框的操作，直接在原有模块上进行修改可能导致不稳定。通过复制开发，可以独立处理复杂功能，避免引发其他问题。
4.
软件组不再使用排版标注模块：排版标注模块已不再使用，但仍需保持兼容性和避免问题，因此建议复制一份，在副本上进行功能迭代和更新，确保系统稳定性。
5.
开发迭代需要独立环境：两个模块都需要新增多个功能，复制后可以在独立环境中进行功能开发和调试，减少对现有系统的干扰。
但同时由于全盘拷贝，需要了解所有的抄写，框和线等操作的展示逻辑，耗时会比较长。
技术实现
技术栈
使用 Vue 和 OpenLayers 库构建题目标注组件。技术整体比较古早，用的还是 Vue2。
核心功能
核心功能即对题目的标注功能
题目默认先经过算法组的 api 进行自动标注，再进行人工标注（故预先有紫色的答案框）。
关键代码片段
项目初始化阶段逻辑：
画板
其中比较关键的逻辑是 Openlayer map的初始化逻辑，这里用 gpt 注释了一下：
代码块
// 初始化OpenLayers地图
initOpenlayer(features: Feature[]) {
// 设置地图的显示区域，使用图片的宽高作为地图的范围
this.extent = [0, 0, this.imageWidth, this.imageHeight]
// 创建自定义的投影对象，这里使用了像素单位来处理地图坐标
this.projection = new Projection({
code: 'xkcd-image', // 自定义投影的代码
units: 'pixels', // 使用像素单位
extent: this.extent, // 定义地图的有效范围（这里是图片的宽高）
})
// 创建视图对象，用于设置地图的视角、缩放等属性
this.view = new View({
projection: this.projection, // 使用上面创建的投影
center: getCenter(this.extent), // 计算地图中心点
zoom: 1, // 初始的缩放级别
})
// 创建地图数据源，存放要展示的地理数据（如绘制的矢量图形）
this.source = new VectorSource({
features: features, // 传入的特征（features）数组，即地图上要显示的对象
})
// 创建矢量图层，将数据源（source）与图层（vector）关联
this.vector = new VectorLayer({
source: this.source, // 使用之前创建的数据源
})
// 获取地图容器的DOM元素（`map`），用于初始化地图
let mapContainer = this.$refs.map as HTMLElement
// 创建地图实例
this.map = new OlMap({
target: mapContainer, // 将地图绑定到指定的容器（mapContainer）
interactions: defaultInteractions({
doubleClickZoom: false, // 禁用双击缩放功能
}),
layers: [
// 添加静态图片层，作为地图的底图
new ImageLayer({
source: new Static({
attributions: '', // 版权信息，通常为空
url: '', // 图片的URL（可以设置为背景图片路径）
projection: this.projection, // 使用自定义投影
imageExtent: this.extent, // 图片的显示范围，与地图范围一致
}),
}),
// 添加矢量图层
this.vector,
],
view: this.view, // 设置地图的视图（显示范围、缩放等）
})
// 添加多选交互功能，用于选择地图上的多个要素
this.addMultipleSelectInteraction()
}