docs/pages/mapswitch.vue

<template>
  <div class="container layout-rl">
    <div class="op-wrapper">
      <div class="section">
        <p class="tip">提示说明</p>
        <ul>
          <li><p>双击点位，可以进行svg图切换。</p></li>
        </ul>
      </div>
    </div>
    <div class="map-wrapper">
      <fabric-building-map-vue :build-data="buildData" v-model="mapData"></fabric-building-map-vue>
    </div>
  </div>
</template>

<script>
import fabricBuildingMapVue from '../components/fabric-building-map-vue'

const TYPE_ENUM = {
  AREA: 1,
  BUILDING: 2,
  FLOOR: 3,
}
export default {
  components: {
    fabricBuildingMapVue
  },
  data () {
    return {
      buildData: {
        id: 1,
        type: TYPE_ENUM.AREA,
        svgMapUrl: 'https://qiniu.qjzd.net/cf.svg',
        pointList: [
          { id: 2, coordX: 0.30141547, coordY: 0.55013478, type: 'img', url: 'http://vve.qiniu.qjzd.net/Fgjso-fDXte_VzkvQS2n2d_Fb5uw' },
          { zoomThreshold: 0.5, id: 2, coordX: 0.6944213, coordY: 0.55121297, type: 'text', fill: 'red', text: '餐饮  店', fontSize: 16, angle: 10, underline: true },
          { coordX: 0.0016652789342214821, coordY: 0.5929919137466307, id: 3},
          { 
            id: 123,
            type: 'imgtext',
            coordX: 0.2,
            coordY: 0.2,
            image: {
              url: "http://vve.qiniu.qjzd.net/Fgjso-fDXte_VzkvQS2n2d_Fb5uw",
              originX: 'center',
              originY: 'center',
              width: 20,
              height: 23,
              top: 0,
              left: 0,
            },
            text: {
              text: '12sdfsdf3',
              originX: 'center',
              originY: 'center',
              top: 25,
              left: 0,
              fontSize: 16,
            },
          },
        ],
        
        heatmapData: [{"coordX":0.058284762697751874,"coordY":0.3706199460916442},{"coordX":0.15736885928393005,"coordY":0.3706199460916442},{"coordX":0.2206494587843464,"coordY":0.3706199460916442},{"coordX":0.24313072439633637,"coordY":0.35983827493261455},{"coordX":0.24895920066611157,"coordY":0.3490566037735849},{"coordX":0.2514571190674438,"coordY":0.33153638814016173},{"coordX":0.25228975853455454,"coordY":0.31805929919137466},{"coordX":0.2514571190674438,"coordY":0.3086253369272237},{"coordX":0.2456286427976686,"coordY":0.2991913746630728},{"coordX":0.23980016652789343,"coordY":0.29784366576819404},{"coordX":0.2373022481265612,"coordY":0.29649595687331537},{"coordX":0.23563696919233973,"coordY":0.29649595687331537},{"coordX":0.23813488759367193,"coordY":0.3005390835579515},{"coordX":0.24229808492922564,"coordY":0.3059299191374663},{"coordX":0.2547876769358868,"coordY":0.316711590296496},{"coordX":0.2664446294754371,"coordY":0.3247978436657682},{"coordX":0.27643630308076605,"coordY":0.33423180592991913},{"coordX":0.28309741881765194,"coordY":0.34097035040431267},{"coordX":0.28642797668609493,"coordY":0.3504043126684636},{"coordX":0.28642797668609493,"coordY":0.35444743935309975},{"coordX":0.28642797668609493,"coordY":0.36253369272237196},{"coordX":0.28642797668609493,"coordY":0.3706199460916442},{"coordX":0.28559533721898417,"coordY":0.37870619946091644},{"coordX":0.28309741881765194,"coordY":0.38409703504043125},{"coordX":0.28309741881765194,"coordY":0.3867924528301887},{"coordX":0.2839300582847627,"coordY":0.40161725067385445},{"coordX":0.29308909242298087,"coordY":0.4299191374663073},{"coordX":0.31973355537052456,"coordY":0.48247978436657685},{"coordX":0.3638634471273938,"coordY":0.5512129380053908},{"coordX":0.42714404662781014,"coordY":0.6199460916442049}],
        children: [
          {
            id: 2,
            type: TYPE_ENUM.BUILDING,
            children: [{
              id: 3,
              type: TYPE_ENUM.FLOOR,
              name: '1F',
              svgMapUrl: 'https://vve.qiniu.qjzd.net/FjX8v4j87gKoqHLeKTfcRyxxdm7t',
              pointList: [
                { id: 2, coordX: 0.40141547, coordY: 0.55013478, type: 'img', url: 'http://vve.qiniu.qjzd.net/FlMiBGKRZHyNtFL03ZCWv5ucIlCw' },
              ],
              heatmapData: [{"coordX":0.58284762697751874,"coordY":0.3706199460916442, value: 100 }]
            },
            {
              id: 4,
              type: TYPE_ENUM.FLOOR,
              name: '2F',
              svgMapUrl: 'https://vve.qiniu.qjzd.net/FjX8v4j87gKoqHLeKTfcRyxxdm7t',
              pointList: [
                { id: 2, coordX: 0.40141547, coordY: 0.55013478, type: 'img', url: 'http://vve.qiniu.qjzd.net/FlMiBGKRZHyNtFL03ZCWv5ucIlCw' },
              ],
              heatmapData: [{"coordX":0.78284762697751874,"coordY":0.3706199460916442, value: 100 }]
            }]
          }
        ],
      },
      mapData: undefined
    }
  },
}
</script>
<style scoped>
.container,
.map-wrapper {
  height: 100%;
  position: relative;
}
</style>