5.2.2 地图多图层，鼠标滚轮缩放被分层了；鼠标悬浮在地图的区域上，高亮效果丢失了

1033131900 commented 2 years ago

Version

5.2.2

Link to Minimal Reproduction

No response

Steps to Reproduce

您好，我在官网看到您的github账号链接，遇到2个奇怪的问题，恳求帮忙，第一个是需要用到地图的某个城市的区县和街道信息，所以我用了地图的series多图层，多个对象重叠，但是我用鼠标滚轮缩放地图的时候，就是分层效果，我想要整体缩放的效果呢，如图：你知道怎么解决么？给我个demo也行

第二个问题是：鼠标悬浮在地图上每个区域，我的高亮效果丢失了，下面附上了我的代码，您看下，帮我看看，啥问题，见鬼了。谢谢了，

Current Behavior

您好，我在官网看到您的github账号链接，遇到2个奇怪的问题，恳求帮忙，第一个是需要用到地图的某个城市的区县和街道信息，所以我用了地图的series多图层，多个对象重叠，但是我用鼠标滚轮缩放地图的时候，就是分层效果，我想要整体缩放的效果呢，如图：你知道怎么解决么？给我个demo也行

第二个问题是：鼠标悬浮在地图上每个区域，我的高亮效果丢失了，下面附上了我的代码，您看下，帮我看看，啥问题，见鬼了。谢谢了，

let chart = echarts.init(document.getElementById('map-container'));
let option = {
  tooltip: {
    trigger: 'item',
    extraCssText: 'z-index:1000'
  },
  series: []
};
let offLineMap = API_CONFIG.common.offLineMap;
let cities = [];
offLineMap.url.forEach((url, ind) => {
  _this.$axios.get(url).then((geoJson) => {
    let zg = `china${ind}`;
    echarts.registerMap(zg, geoJson.data);
    _this.geoData = geoJson.data;

    let cs = _this.geoData.features.map((item) => {
      let proItem = item.properties;
      if (proItem.name || proItem.streetname || proItem.dsname) {
        return proItem.name || proItem.streetname || proItem.dsname;
      }
      return '';
    });

    option.series.push({
      map: zg,
      nameProperty:
        offLineMap.codeId !== 371500
          ? 'name'
          : _this.geoData.features[0].properties.streetname
          ? 'streetname'
          : 'dsname',
      label: {
        show: true,
        color: ind === 0 ? '#000' : 'rgba(255,255,255,0.7)'
      },
      itemStyle: {
        borderColor: ind === 0 ? '#389BB7' : 'rgba(45,62,255,0.2)',
        areaColor: ind === 0 ? '#66b1ff' : 'rgba(0,64,128,0.3)',
        borderWidth: offLineMap.codeId !== 371500 ? 1 : ind === 0 ? 2 : 1,
        opacity: offLineMap.codeId !== 371500 ? 1 : ind === 0 ? 1 : 0.55
      },
      emphasis: {
        label: {
          show: true,
          color: ind === 0 ? '#fff' : '#F3FF24'
        },
        itemStyle: {
          areaColor: '#324ac4',
          borderWidth: 0,
          opacity: 1
        }
      }
    });
    maps.forEach((m) => {
      if (
        m.address === offLineMap.label + '省' ||
        m.address === offLineMap.label
      ) {
        cities.push({ i: ind, cityItem: Object.assign(m, { address: cs[0] }) });
        return false;
      }
      let arr = cs.filter((c) => {
        return c.includes(m.address) || m.address.includes(c);
      });
      if (arr.length > 0 && arr[0]) {
        cities.push({
          i: ind,
          cityItem: Object.assign(m, { address: cs[cs.indexOf(arr[0])] })
        });
      }
    });
    let len = cities.length;
    let index = 0;
    if (
      offLineMap.codeId !== 371500 ||
      (offLineMap.url.length > 1 && ind === offLineMap.url.length - 1) ||
      (offLineMap.url.length === 1 && ind === 0)
    ) {
      option.series.map((serie) => {
        serie.type = 'map';
        serie.roam = true;
        serie.zoom = 1.2; //这里是关键，一定要放在 series中
        serie.data = [];
        serie.silent = true;
        serie.scaleLimit = {
          min: 0.8,
          max: 3
        };
      });
      (option.tooltip.formatter = function (items) {
        return `地域：${items.name} ${
          len > 0 ? '<br/>标题：' + cities[index].cityItem.name : ''
        }${len > 0 ? '<br/>时间：' + cities[index].cityItem.createTime : ''}`;
      }),
        chart.setOption(option);

      setInterval(() => {
        if (index !== 0 && cities.length > 0) {
          chart.dispatchAction({
            type: 'downplay',
            seriesIndex: cities[index - 1].i,
            name: cities[index - 1].cityItem.address
          });
        }

        if (index === len) {
          index = 0;
        }

        chart.dispatchAction({
          type: 'highlight',
          seriesIndex: cities[index].i,
          name: cities.length > 0 ? cities[index].cityItem.address : ''
        });

        chart.dispatchAction({
          type: 'showTip',
          seriesIndex: cities[index].i,
          name: cities.length > 0 ? cities[index].cityItem.address : ''
        });

        index++;
      }, 3000);
    }
  });
});

Expected Behavior

期待鼠标滚轮缩放，多层图一起缩放；鼠标移到每一块，高亮效果恢复

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

咋回事啊，在线等，我找不到啥解决方案

echarts-bot[bot] commented 2 years ago

@1033131900 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** 5.2.2 The map is multi-layered, and the mouse wheel zoom is layered; when the mouse is hovering over the map area, the highlighting effect is lost **BODY** ### Version 5.2.2 ### Link to Minimal Reproduction _No response_ ### Steps to Reproduce Hello, I saw your github account link on the official website and encountered 2 strange problems. I beg for help. The first one is the district, county and street information of a city that needs a map, so I used the map The series has multiple layers and multiple objects overlap, but when I use the mouse wheel to zoom the map, it has a layered effect. I want the overall zoom effect, as shown in the figure: Do you know how to solve it? Give me a demo The second question is: hovering the mouse over each area on the map, my highlighting effect is lost. I have attached my code below. Take a look, help me see, what the hell is the problem. Thank you, ### Current Behavior Hello, I saw your github account link on the official website and encountered 2 strange problems. I beg for help. The first one is the district, county and street information of a city that needs a map, so I used the map The series has multiple layers and multiple objects overlap, but when I use the mouse wheel to zoom the map, it has a layered effect. I want the overall zoom effect, as shown in the figure: Do you know how to solve it? Give me a demo The second question is: hovering the mouse over each area on the map, my highlighting effect is lost. I have attached my code below. Take a look, help me see, what the hell is the problem. Thank you, let chart = echarts.init(document.getElementById('map-container')); let option = { tooltip: { trigger:'item', extraCssText:'z-index:1000' }, series: [] }; let offLineMap = API_CONFIG.common.offLineMap; let cities = []; offLineMap.url.forEach((url, ind) => { _this.$axios.get(url).then((geoJson) => { let zg = `china${ind}` echarts.registerMap(zg, geoJson.data); _this.geoData = geoJson.data let cs = _this.geoData.features.map(item => { let proItem = item.properties if (proItem.name || proItem.streetname || proItem.dsname) { return proItem.name || proItem.streetname || proItem.dsname } return'' }) option.series.push({ map: zg, nameProperty: offLineMap.codeId !== 371500?'name': _this.geoData.features[0].properties.streetname?'streetname':'dsname', label: { show: true, color: ind === 0?'#000':'rgba(255,255,255,0.7)' }, itemStyle: { borderColor: ind === 0?'#389BB7':'rgba(45,62,255,0.2)', areaColor: ind === 0?'#66b1ff':'rgba(0,64,128,0.3)', borderWidth: offLineMap.codeId !== 371500? 1: ind === 0? 2: 1, opacity: offLineMap.codeId !== 371500? 1: ind === 0? 1: 0.55 }, emphasis: { label: { show: true, color: ind === 0?'#fff':'#F3FF24' }, itemStyle: { areaColor:'#324ac4', borderWidth: 0, opacity: 1 } } }) maps.forEach((m) => { if (m.address === offLineMap.label +'province' || m.address === offLineMap.label) { cities.push({ i: ind, cityItem: Object.assign(m, {address: cs[0] }) }); return false } let arr = cs.filter((c) => { return c.includes(m.address) || m.address.includes(c); }); if (arr.length> 0 && arr[0]) { cities.push( {i: ind, cityItem: Object.assign(m, {address: cs[cs.indexOf(arr[0])] })} ); } }); let len = cities.length; let index = 0; if (offLineMap.codeId !== 371500 || offLineMap.url.length> 1 && ind === offLineMap.url.length-1 || offLineMap.url.length === 1 && ind === 0) { option.series.map((serie) => { serie.type ='map'; serie.roam = true; serie.zoom = 1.2; //Here is the key, it must be placed in the series serie.data = []; serie.silent = true; serie.scaleLimit = { min: 0.8, max: 3 } }) option.tooltip.formatter = function (items) { return `Region: ${items.name} ${len> 0?'
Title:' + cities[index].cityItem.name:'' }${len> 0?'
Time:' + cities[index].cityItem.createTime:''}`; }, chart.setOption(option); setInterval(() => { if (index !== 0 && cities.length> 0) { chart.dispatchAction({ type:'downplay', seriesIndex: cities[index-1].i, name: cities[index-1].cityItem.address }); } if (index === len) { index = 0 } chart.dispatchAction({ type:'highlight', seriesIndex: cities[index].i, name: cities.length> 0? cities[index].cityItem.address:'' }); chart.dispatchAction({ type:'showTip', seriesIndex: cities[index].i, name: cities.length> 0? cities[index].cityItem.address:'' }); index++ }, 3000) } }) }) ### Expected Behavior Expect the mouse wheel to zoom, and the multi-layer image zooms together; Move the mouse to each piece, the highlight effect is restored ### Environment ```markdown -OS: -Browser: -Framework: ``` ### Any additional comments? What's the matter, wait online, I can't find any solution

Ovilia commented 2 years ago

缩放应该默认就是多图层都能缩放的，例子参见 https://echarts.apache.org/examples/zh/editor.html?c=map-polygon

1033131900 commented 2 years ago

你这地图底图是百度的呀，我的地图地图是区域的json数据，registerMap的

mystylemylife commented 1 year ago

有解决方案吗，求

apache / echarts