图片热地图——点击不同区域有不同反映+SVG热图问题

<template>
  <div>
    <div class="popup" v-if="showPopup">
      <detail-dialog
        :visible="showPopup"
        :kind="season"
        @exitDialog="exitDialog"
      />
    </div>

    <img :src="imgSrc" border="0" usemap="#pmap" alt="baseImg" />

    <map name="pmap" id="pmap">
      <area
        v-for="(item, index) in areaData"
        :key="index"
        shape="rect"
        :coords="item.coords"
        @click="handleClick(item.alt)"
        :alt="item.alt"
      />
    </map>
  </div>
</template>
<script>
import DetailDialog from "../components/detailDialog.vue";
export default {
  components: {
    DetailDialog,
  },
  data() {
    return {
      imgSrc: require("../assets/img/cxxx.png"),
      showPopup: false,
      season: "",
      areaData: [
        {
          coords: "0,0,742,213",
          alt: "rawMaterial",
        },
        {
          coords: "0,231,307,476",
          alt: "fuel",
        },
        {
          coords: "334,332,786,623",
          alt: "clinker",
        },
      ],
    };
  },
  methods: {
    // close dialog
    exitDialog() {
      this.showPopup = false;
    },
    // mouseclick action
    handleClick(season) {
      this.season = season;
      this.showPopup = true;
    },
  },
};
</script>

参考网站——HTML图片热区map area的用法 -- 简明现代魔法 (nowamagic.net)

SVG——SVG 图像入门教程 - 阮一峰的网络日志 (ruanyifeng.com)

前端实现一个简单的svg定制地图_pipixx的博客-CSDN博客_前端自定义地图

0.需求

点击同一张图片不同区域有不同反馈

1.思路

用HTML的<map>与<area>标签来解决，因为有比较多的重复的就做了个数组扔进去。

 <img :src="imgSrc" border="0" usemap="#pmap" alt="baseImg" />
 
    <map name="pmap" id="pmap">
      <area
        v-for="(item, index) in areaData"
        :key="index"
        shape="rect"
        :coords="item.coords"
        @click="handleClick(item.alt)"
        :alt="item.alt"
      />
    </map>

// data

这个coords是x1,y1,x2,y2，左上角和右下角坐标值，用PS取值

 areaData: [
        {
          coords: "0,0,742,213",
          alt: "rawMaterial",
        },
]

2.升级之SVG热图问题

划区域用的AI

<svg
      version="1.1"
      id="&#x56FE;&#x5C42;_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      width="1373px"
      height="832px"
      viewBox="0 0 1373 832"
      style="enable-background: new 0 0 1373 832"
      xml:space="preserve"
    >
      <image
        style="overflow: visible"
        width="1373"
        height="832"
        xlink:href="../assets/carbonBg.png"
      ></image>
      <g @click="onSvg('group')">
        <rect
          class="tongAn"
          x="934"
          y="59"
          style="fill: #ffffff"
          width="40"
          height="42"
        />
        <rect
          class="tongAn"
          x="934"
          y="401"
          style="fill: #ffffff"
          width="40"
          height="41"
        />
        <rect
          class="tongAn"
          x="792"
          y="668"
          style="fill: #ffffff"
          width="49"
          height="40"
        />
        <rect
          class="tongAn"
          x="798"
          y="739"
          style="fill: #ffffff"
          width="43"
          height="39"
        />
      </g>

      <rect
        class="tongAn"
        y="7"
        @click="onSvg('origin')"
        style="fill: #ffffff"
        width="401"
        height="208"
      />
      <rect
        class="tongAn"
        x="296"
        y="300"
        @click="onSvg('rect')"
        style="fill: #ffffff"
        width="455"
        height="314"
      />
    </svg>

注意，实现边框线在CSS样式中

 #clipped {
    margin-bottom: 20px;
  }
  .tongAn {
    fill: #fefefe;
    fill-opacity: 0.01;
    &:hover {
      cursor: pointer;
      stroke: #d70000;
      stroke-width: 4px;
    }
  }

如此便可实现，鼠标悬浮对应区域变化，还可以自己加动作。