ionic5 使用 svg 绘制自适应地图

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：295

在`ionic`中使用`svg`实现如下地图，点击之后区域的边框高亮显示

![松江街镇地图](http://file.xindejob.com/20200427/6d482c925e6981502c9eb0828902a97f.png "松江街镇地图")

- 使用svg工具画图，获得各个街镇的path数据。关于如何画图参考我的另一篇文章（使用Inkscape画svg地图）
- 准备类似如下数据，每个街道有编号，名称和path，用文本编辑器查看svg原图可以获得path地址

```
mapSvg = [
    {
      id: 24,
      name: '九亭镇',
      d: 'm 168.53958,18.71125 3.28083,6.6675 0.0529,4.815418 1.64042,4.1275 -8.09625,-0.05292 -1.69334,4.974166 -1.69333,0.370417 -3.4925,-4.392083 -6.19125,4.233333 -1.32292,0.47625 -4.97416,-8.625416 -0.42334,-8.572502 6.29709,-0.529166 6.93208,-1.5875 1.5875,3.069166 z',
    },
    {
      id: 18,
      name: '岳阳街道',
      d: 'M 108.21458,86.074167 122.71375,81.682084 121.86708,96.975 109.59042,96.0225 108.69083,94.805417 Z',
    },
    {
      id: 16,
      name: '方松街道',
      d: 'M 84.454999,69.458334 113.18875,69.67 h 0.47625 v 4.392084 l 8.46667,5.344583 0.58208,2.275417 -14.49917,4.392083 -22.277914,-0.15875 -6.6675,-13.0175 z',
    },
    {
      id: 20,
      name: '广富林街道',
      d: 'm 78.84583,66.01875 0.635,-9.419166 23.28334,-3.439586 10.84791,0.211667 L 113.18875,69.67 84.454999,69.458334 79.269166,72.897917 Z',
    },
  ]; // 地图坐标
```

- 将如上图片作为背景放到assets文件夹下面

- 模板中增加svg标签，注意svg内部不能包含其他组件，只能使用svg的一些标签

```
&lt;ion-content class="commbg m-wrap-bg"&gt;
  &lt;div class="header"&gt;
    &lt;a class="icon" (click)="gotomap()"&gt;&lt;/a&gt;
    &lt;span&gt;• 街镇风采&lt;/span&gt;
  &lt;/div&gt;
  &lt;svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   [attr.width]="styles.width"
   [attr.height]="styles.height"
   [attr.viewBox]="styles.viewBox"
   id="svg8"&gt;
    &lt;defs
      id="defs2" &gt;
    &lt;/defs&gt;
    &lt;g
      id="layer1"&gt;
      &lt;image
        y="-0.089281619"
        x="-0.018903701"
        id="image823"
        xlink:href="assets/scene/songjiangjz-scene/map.png"
        preserveAspectRatio="none"
        height="167.21666"
        width="184.94376" /&gt;
    &lt;/g&gt;
    &lt;g *ngFor="let map of mapSvg"
      id="layer{{ map.id }}"
      [attr.inkscape:label]="map.name"&gt;
      &lt;path
        style="fill:transparent;"
        [style.stroke]="selectedMap == map.id ? '#e2e2e2': 'none'"
        [style.stroke-widt]="selectedMap == map.id ? '0.25px': '0'"
        (click)="goLevel(map.id)"
        [attr.d]="map.d"
        id="path{{ map.d }}" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
&lt;/ion-content&gt;
```

- 设置缩放和大小，如下可以根据屏幕宽度全屏显示，思路是：设置宽度为窗口的宽度，高度等比例缩放。

```
styles = {
    width: 699,
    height: 632,
    viewBox: '0 0 184.94375 167.21667',
  }; // svg 容器
private svgAreaFactor = 699 / 632; // 纵横比

ngOnInit() {
    /* 地图自适应 */
    this.styles.width = window.innerWidth;
    this.styles.height = (window.innerWidth * this.svgAreaFactor);
  }
```

- 动态设置svg的width，height和viewBox。这三个值是和地图相关的，等比例缩放需要设置和svg原图中的大小一致。

&gt; svg的属性动态设置值，使用attr，不能直接写属性的名字

```
&lt;svg
   [attr.width]="styles.width"
   [attr.height]="styles.height"
   [attr.viewBox]="styles.viewBox"

......

```

- 设置svg背景图片。此背景从svg源文件中拷贝过来。

```
    &lt;g
      id="layer1"&gt;
      &lt;image
        y="-0.089281619"
        x="-0.018903701"
        id="image823"
        xlink:href="assets/scene/songjiangjz-scene/map.png"
        preserveAspectRatio="none"
        height="167.21666"
        width="184.94376" /&gt;
    &lt;/g&gt;
```

- 循环绘制各街镇图形。

1. 需要设置背景，否则不可以点击，但是不能遮挡背景，因此是设置透明背景。

```
   style="fill:transparent;"
   ```

2. 在`path`标签上添加点击事件，而不是在`g`标签上。定义点击事件如下

```
     goLevel(data) {
       this.selectedMap = data;
     }
   ```

3. 高亮效果如下，例如可以加粗边框

```
   [style.stroke]="selectedMap == map.id ? '#e2e2e2': 'none'"
   [style.stroke-widt]="selectedMap == map.id ? '0.25px': '0'"
   ```

街镇路径标签完整代码如下：

```
  &lt;g *ngFor="let map of mapSvg"
      id="layer{{ map.id }}"
      [attr.inkscape:label]="map.name"&gt;
      &lt;path
        style="fill:transparent;"
        [style.stroke]="selectedMap == map.id ? '#e2e2e2': 'none'"
        [style.stroke-widt]="selectedMap == map.id ? '0.25px': '0'"
        (click)="goLevel(map.id)"
        [attr.d]="map.d"
        id="path{{ map.d }}" /&gt;
    &lt;/g&gt;
```

标签： ionic5 svg 地图

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：ion-slides 增加滑动效果之后ion-slide点击无效的问题

ionic5 使用 svg 绘制自适应地图

随便看看

留言