>
> **SVG编辑**
>
>
>
如果引入的不是DataV里下载的SVG底图，而只是引入UI给的普通SVG图的话是没有交互效果的，它就只是一张图，和普通的背景没什么两样，在官网中有专门提到这类**具名元素**
👉🏼 如果要控制 SVG 中的某些元素，或者让某些元素能交互，我们首先要在 SVG 中标记这些元素：在这些元素上添加 `name`属性（下文称此类添加过 `name`属性的元素为：“具名元素”）。许多功能都依赖于对元素的命名。
所以我们需要编辑SVG文件，使其能够满足**具名元素**要求。SVG图片是一种矢量图形文件格式，可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能。
我在搜索之后找到了一个古早的软件SVGDeveloper，这个软件很难找（也很难用），上次更新还是在2014年，用的还是上个世纪的图形化界面，整体呈现一种复古感。
但使用起来没什么问题，功能也很多，从四面八方的工具栏就可以看出来，这次我采用的就是这个编辑器。将UI设计好的png图导入，用钢笔工具不用太细致地描出各个地市的边缘，当然别忘了在`path` 中加入`name`使其成为**具名元素**。如下图所示：
然后不断重复，画出每个地市的每个区县，最后需要去掉边缘线添加填充色（画图时不加填充色是避免影响视觉，最后需要添加是因为不添加的画ECharts就当这块**具名元素**是透明的，但SVG里的颜色和最后ECharts所展示的颜色无关，可以随意设置），最后拿到的SVG图是这样的：
按上一步导入ECharts之后得到的效果就是这样：
交互、倒影，所有的要求都满足了，并且用的是最简单的实现方式。
之后我才发现SVG的在线编辑器也有很多，总体都大同小异，这里放一个吧。我所需要的功能它都有了，比起软件更加现代化，简单使用是没问题的。
[svg在线编辑器\_svg矢量图在线制作工具-易点在线矢量图形编辑器](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)
💡 需要补充一个点：将png图片导入SVGDeveloper之后它是可以正常显示的，但做好后的图导入ECharts就只显示每个区域而不显示png背景，这是因为引入的图片地址是存储在本地的，当上传服务器后他就找不到这个文件，如下图所示。
我的处理办法是将图片转为**Base64编码**，可以找到很多上传文件转**Bese64编码**的网站，在这里放上一个。
测试了上面这个在线的SVG编辑器之后发现，导入图片之后它就已经自动转换成Base64编码了，省去了这一次操作步骤。
### 2.OpenLayer的基础入门
因为遇到了另一个需求，需要多地图有多种操作，ECharts的地图已经不能满足，所以后来我们选择了使用OpenLayer来制作这部分的地图。
[参考文章](https://zhuanlan.zhihu.com/p/529043771)
OL是一个很庞大的体系，但入门起来也十分简单，只需要掌握**Map、View、Source、Layer**这几个核心类，就可以做出一个最基本的地图，需要在此基础上添加更多花样化定制化的GIS功能到时候再按需学习也可以。
一个大的容器**Map**，加上一个视角**View**，将来自数据源**Source**的图层**Layer**一层层叠加，就组合成了一个基本的地图。
>
> **Map**
>
>
>
**Map**类是一个容器，接下来提到的其他类都是被包含在其中的，最重要的一个属性就是target了，target属性设置的是地图要挂载到哪个**DOM节点**上进行渲染。其他还有`interactions` 用来控制交互动作，`controls` 用来控制相关控件等，详细可以查看[官方API文档](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)。
>
> **View**
>
>
>
**View**类是类似于相机，用于变化不同视角，里面一些比较常见的属性比如`zoom`控制缩放，`extent`控制视野范围，`center`是地图中心点等。
>
> **Source**
>
>
>
**Source**类是指的数据源，又被分为了很多子类：`OSM、ImageSource**、**TileSources、VectorSource` 等，根据实际情况选择不同类型数据源进行读取，本次项目使用较多的就是`VectorSource` ，因为大多都是读取的一些JSON文件，以及使用[turfJS](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)绘制的矢量图像。
>
> **Layer**
>
>
>
**Layer**类是重点，地图正是一层一层图层叠加出来的，就如下图所示，这是放大地图后默认显示的四个图层，当地图缩小之后这四个图层将不可见，同时将另外的图层设为可见，另外点击地图上的点，还会出现对应时延圈，这也是三个图层。
将以上四个类有机结合起来，就可以组成一个完整的地图了，一个简易代码demo：
import Map from ‘ol/Map’;
import View from ‘ol/View’;
import OSM from ‘ol/source/OSM’;
import TileLayer from ‘ol/layer/Tile’;
new Map({
layers: [
new TileLayer({source: new OSM()})
],
view: new View({
center: [0, 0],
zoom: 2
}),
target: ‘map’
});
## ECharts相关
我就接着补充两个可能会有用的part，以防不时之需。
### 1.在ECharts的tooltip中使用HTML标签
tooltip是ECHarts一个很重要的部分，它独特的回调函数formatter属性
formatter(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
这是label、legend等其他配置项都不具有的功能（不用试了我已经试过一遍了），label最接近的一个解决方案是使用[富文本rich](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)，但仍有很大局限性，而在HTML标签中甚至可以再加入ECharts实现套娃~~，子子孙孙无穷尽也。~~
从上面官方给出的回调函数中可以看到有params、ticket、callback三个参数，具体是什么内容可以自己打印看看。
在函数中定义一个变量htmlStr，然后就可以在变量中书写HTML内容，写法和正常写HTML一样，标签内可以使用style参数定义样式，最后将htmlStr变量return就可以看到效果了。
⚠️ **HTML内容需要包含在反引号 ( ` )中，而不是单、双引号中**
### 2.水球图相关
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pf2UzIsk-1677567802010)(null)]
水球图‣是ECharts的一个社区扩展，提供了一种适合于展现单个百分比数据的图表，支持多条水波和动画。
水球图支持自定义的配置项很多，包括但不限于波浪条数、颜色、振幅、动画甚至外框的形状，具体配置项内容可以看[这篇文章](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)或查询[官方文档](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)。
⚠️ \*\***注意：`echarts-liquidfill@3`版本匹配`echarts@5`版本，`echarts-liquidfill@2`版本匹配`echarts@4`版本，并且水球图是社区扩展，所以需要单独安装引入**
## 一些插件分享
很多插件是前端之光，减少了很多工作量，~~能使用轮子的地方就不用自己造了。~~
### 1.`vue-seamless-scroll`
[vue-seamless-scroll](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)
一个简单的基于vue.js的无缝滚动插件，可以支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能，大屏里很常用。
⚠️ **注意：`vue-seamless-scroll` 仅支持Vue2，如果想在Vue3中使用，请使用此项目Issues中其他用户扩展的Vue3兼容版`vue3-seamless-scroll`**
### 2.`Swiper`
[Swiper中文网-轮播图幻灯片js插件,H5页面前端开发](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)
一款滑动插件，效果类似于element的走马灯，不过这个插件效果更加强大，可定制化程度更高，效果也更好，同时支持电脑和移动端。
1388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
