项目概述
EPSG–European Petroleum Survey Group 定义记录不同的地理坐标系统，投影，网格相关的转换参数，EPSG code用来唯一标识这些不同的地理坐标系统，投影和网格，EPSG编码如4326代表一种特定的地理坐标系统，是最常用的地理坐标系统之一，WGS 84–World Geodetic System 1984 俗称GPS，该系统提供了多个图源，可以通过搜索EPSG编号或者坐标系名称在图源中加载范围
常用的编码：4326：world Geodetic System 1984 经纬度定义位置，3857：Peseudo-Mercator 网络服务地图，Web Mercator 等角圆柱投影，在线地图显示，3785：Popular Visualisation CRS Mercator 类似3857
项目目录结构
- public 一般存放静态资源，打包不会被压缩
- search_file
- src
- assets 资源，会被压缩处理
- components 组件文件
- lang 国际化资源文件
- stores 数据存储
- views 页面
- AppVUE 主页面视图
- mainJS 主要逻辑
- indexHTML 入口文件
- jsconfigJSON 编辑器理解项目的配置文件
- packageJSON 依赖文件
- viteconfigJS vite的配置文件
package依赖分析
- element-plus
- ol：openlayers显示各种地图数据
- ol-contextmenu ：为 OpenLayers 地图添加自定义右键上下文菜单的插件
- ol-ext：它提供了一系列额外的控件、交互、图层、格式和工具
- pinia：
- vue3.4.15
- vue-i18n：多语言支持
- vue-json-pretty：用于展示 JSON 数据的树状视图
- vue3-openlayers：允许开发者使用 Vue 组件的方式来集成 OpenLayers 地图功能。
vite依赖分析
配置文件路径
代码分析
主文件App中
maintoolconfig整体布局，水平flex布局，宽高都是百分百视口，加边框，内外间距为0
left-panel作为左边
separator作为中间
right-panel作为右边，
WMTSTileGrid：openlayer中，瓦片网格是用来定义地图瓦片如何被组织，索引，请求的，WMTSTileGrid允许开发者配置瓦片大小，分辨率，瓦片矩阵集等参数
getWidth, getTopLeft：获取范围数组作为参数，返回数值的宽度和左上角
watchEffect中监听fileListStore.SELECT_EPSG是否被选择，如果选择会更新经纬度范围，
x，y坐标一般分别是经度和纬度，
toEPSG3857把旧坐标转化为3857坐标，x坐标处理：首先坐标×地球周长的一半，然后转化为弧度，y坐标处理，通过正切函数和自然对数来计算y坐标，经过处理后返回新的坐标
然后需要绘制框，然后需要根据上面的经纬度范围和坐标转换处理框的范围
右键点击弹出菜单，可以标记点，放大缩小，作为中心
菜单数组，标记点，
菜单数组包括三个属性，文本，类名，回调函数，三个作用，设置中心逻辑：利用setCenter设置中心，getZoom，然后setZoom+3，添加标记：
const Feature = inject(“ol-feature”);
const Geom = inject(“ol-geom”);
通过new这两个添加标记点
然后是切换底图的函数，通过映射关系visibilityMap映射是否选中，commandNameMap映射名称