feat:地图飞线

ZhangXianQiang

2024-03-20 21d0ef7882ef6d19f3da5c444b694f251a27dd16

feat:地图飞线

 src/views/screen/components/screen-map/index.vue

@@ -15,18 +15,18 @@
import WrapperTitle from '../wrapper-title/index';

echarts.registerMap('zigong', mapData);
console.log(mapData);
let mapChart = null;
let tempName = '';
let observer = null;
const mapConfig = {
  series: [{
    map: "zigong", //注册地图的名字
    type: "map3D",
  geo3D: {
    map: 'zigong',
    show: true,
    bottom: 0,
    left: 0,
    top: 0,
    right: 0,
    zlevel: 1,
    itemStyle: {
      color: "#4189f2", // 背景
      opacity: 1, //透明度
@@ -44,28 +44,112 @@
    // 控制器
    viewControl: {
      beta: -30,
      alpha: 90,
      distance: 100,
      alpha: 50,
      distance: 105,
      maxBeta: 180,
      panSensitivity: 0
      panSensitivity: 0,
      zoomSensitivity: 1,
      rotateSensitivity: 0,
    },
    // 鼠标移入时样式
    emphasis: {
      itemStyle: {
        color: "#F63545"
        color: "#F63545",
      }
    },
    // regions: mapData.features.map((item) => {
    //   return {
    //     name: item.properties.name,
    //     itemStyle: {
    //       color: "#4189f2"
    //     }
    //   }
    // })
  },
  series: [
    {
      map: "zigong", //注册地图的名字
      type: "map3D",
      bottom: 0,
      left: 0,
      top: 0,
      right: 0,
      zlevel: 2,
      itemStyle: {
        color: "#4189f2", // 背景
        opacity: 0, //透明度
        borderWidth: 0, // 边框宽度
        borderColor: "#fff", // 边框颜色
        fontSize: 18, //
      },

    // 数据
    data: mapData.features.map((item) => {
      return {
        name: item.properties.name,
        itemStyle: {
          color: "#4189f2"
      // 标签
      label: {
        show: false,
        color: "#fff", //地图初始化区域字体颜色
        fontSize: 18,
      },
      // 控制器
      viewControl: {
        beta: -30,
        alpha: 50,
        distance: 105,
        maxBeta: 180,
        panSensitivity: 0,
        zoomSensitivity: 1,
        rotateSensitivity: 0,
      },
      
      // 数据
      data: mapData.features.map((item) => {
        return {
          name: item.properties.name,
          itemStyle: {
            color: "#4189f2"
          }
        }
      }
    }),
  }
      }),

    },
    {
      type: 'lines3D',
      coordinateSystem: 'geo3D',
      zlevel: 15,

      effect: {
        show: true,
        period: 5,
        trailLength: 0.2,
        color: '#01AAED',
      },
      lineStyle: {
        width: 3,
        opacity: 0.6,
        color: '#FFB800'
      },
      data: [
        [
          [104.343914,29.470778],
          [104.766432,29.328016]
        ],
        [
          [104.603116,29.347364],
          [104.766432,29.328016]
        ],
        [
          [104.873139,29.30861],
          [104.766432,29.328016]
        ],
        [
          [105.058792,29.1521],
          [104.766432,29.328016]
        ],
        [
          [104.848535,29.410526],
          [104.766432,29.328016]
        ],
      ]
    }
  ]

};
@@ -82,13 +166,21 @@
  methods: {
    filterData(name) {
      this.initConfig();
      let temp = mapConfig.series[0].data.find(item => item.name === name);
      let temp = mapConfig.geo3D.regions.find(item => item.name === name);

      // mapConfig.geo3D.regions.push({
      //   name: name,
      //   itemStyle: {
      //     color: '#F63545'
      //   }
      // });
      temp.itemStyle.color = '#F63545';
      mapChart.setOption(mapConfig, true);
      this.$emit('filterData', name);
    },
    initConfig() {
      mapConfig.series[0].data.forEach(item => {
      // mapConfig.geo3D.regions = [];
      mapConfig.geo3D.regions.forEach(item => {
        item.itemStyle.color = '#4189f2';
      });
    },
@@ -112,6 +204,7 @@
    mapChart = echarts.init(this.$refs.map);
    mapChart.setOption(mapConfig, true);
    mapChart.on('click', (params) => {
      return;
      if (tempName === params.name) {
        tempName = '';
        this.initConfig();
@@ -144,8 +237,9 @@
  .map-content {
    flex: 1;
    background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
    border: 1px solid rgba(47, 91, 157, 0.8);
  }

  .map-style {
    width: 100%;
    height: 100%;

 src/views/screen/components/screen-map/test.vue