【vue】echarts地图添加蒙版图片，多图层地图实现天气信息展示

 实现原理：多层图层叠加实现复杂的信息展示。

<template>
  <div class="wrapper">
    <el-drawer
      title="天气信息"
      :modal="iszz"
      :visible.sync="weatherinfo"
      :direction="direction"
    >
      <drawer
        :labelname="labelname"
        :coordinates="coordinates"
        :selectcityid="selectcityid"
        :pdate="pdate"
        :radio="radio"
      ></drawer>
    </el-drawer>

    <div style="background-image: url(/img/map/bjditu.jpg); height: 100%">
<!--    <div style="background: white; height: 100%">-->
        <div>
            <el-radio-group v-model="radio" style="margin: 30px 100px;" ref="radio" @input="changeRadio">
                <el-radio :label="3" border style="color: white;">国内气象源</el-radio>
                <el-radio :label="6" border style="color: white;">国外气象源</el-radio>
                <el-radio :label="9" border style="color: white;">城市气象院</el-radio>
            </el-radio-group>
        </div>
      <div ref="myEchart" :style="{width: '100%', height: height}"></div>
      <img
        ref="mapSvg"
        id="mapSvg"
        v-show="false"
        style="width: 500px; height: 100%"
        src="/img/map/wl.png"
       alt=""/>
    </div>
    <div
      class="time-slide"
      @mouseenter="changeActive($event)"
      @mouseleave="removeActive($event)"
    >
      <el-slider
        v-model="timepid"
        :step="1"
        :min="1"
        :max="96"
        :marks="marks"
        :show-stops="true"
        @change="valueChange"
        :format-tooltip="formatToolTip"
      ></el-slider>
    </div>
  </div>
</template>

资源包：点这里

原文地址：https://blog.csdn.net/galaxyJING/article/details/143683911

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！