地图信息轮播

zhengpz

2021-08-14 cd0a6ea7280382cb761dc836901cb0d22fa4538f

 src/views/home/index.vue

@@ -30,13 +30,13 @@
            <span>{{ leftData.fw }}</span>
            <span>个</span>
          </div>
          <div class="leftEchartTitle leftEchartTitle4">
          <!-- <div class="leftEchartTitle leftEchartTitle4">
            <div class="block1"></div>
            <span>武装守押公司</span>
            <span>{{ leftData.wz }}</span>
            <span>个</span>
          </div>
          <div class="leftEchartTitle leftEchartTitle5">
          </div> -->
          <div class="leftEchartTitle leftEchartTitle4">
            <div class="block1"></div>
            <span>跨区域保安公司</span>
            <span>{{ leftData.kqy }}</span>
@@ -60,11 +60,11 @@
      </div>
      <div class="middle" v-loading="middleloading">
        <div class="mapimg">
          <div class="textBox">
          <!-- <div class="textBox">
            <transition name="slide">
              <p class="text" :key="text.id">{{ text.val }}</p>
            </transition>
          </div>
          </div> -->

          <!-- <div></div> -->
          <div class="mapBtn" @click="setMapData(2)">
@@ -336,22 +336,23 @@
</template>

<script>
import "ol/ol.css";
import './echarts-auto-tooltip'
// import "ol/ol.css";
import * as echarts from "echarts";
import optionJs from "./indexEchart";
import TileLayer from "ol/layer/Tile";
// import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Map, View } from "ol";
import { Tile, Group } from "ol/layer";
import { OSM, TileJSON } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
// import { Map, View } from "ol";
// import { Tile, Group } from "ol/layer";
// import { OSM, TileJSON } from "ol/source";
// import VectorLayer from "ol/layer/Vector";
// import VectorSource from "ol/source/Vector";

import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import { Fill, Stroke, Circle, Style, Icon } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
import axios from "../../router/axios";
// import Feature from "ol/Feature.js";
// import Point from "ol/geom/Point.js";
// import { Fill, Stroke, Circle, Style, Icon } from "ol/style";
// import GeoJSON from "ol/format/GeoJSON";
// import axios from "../../router/axios";
import {
  securityTotal,
  holderNum,
@@ -532,6 +533,7 @@
        this.echarts.mapEchart = echarts.init(document.getElementById("map"));
      }
      this.echarts.mapEchart.setOption(optionJs.middleData(data, type));
      echartAutoTools.loopShowTooltip(this.echarts.mapEchart, optionJs.middleData(data, type), {loopSeries: true});
    },
    setMapData(type) {
      this.middleloading = true;