ecomfe / echarts-gl

Extension pack for Apache ECharts, providing globe visualization and 3D plots.
BSD 3-Clause "New" or "Revised" License
2.59k stars 844 forks source link

bug: geo3D.itemStyle.borderWidth; 使用geo3D加载地图,并设置边界边框,调用setOption加载其它地图,边框任显示原地图边框 #402

Open lyttonlee opened 3 years ago

lyttonlee commented 3 years ago
<template>
  <div @click="changeMap">改变地图</div>
  <div id="chart"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import beijing from '../../assets/beijing.json'
import china from '../../assets/china.json'
echarts.registerMap('beijing', beijing as any)
echarts.registerMap('china', china as any)
export default defineComponent({
  setup () {
    let chart: echarts.ECharts | null = null
    let activeMap: string = 'beijing'
    function changeMap () {
      if (activeMap === 'beijing') {
        activeMap = 'china'
      } else {
        activeMap = 'beijing'
      }
      const option = {
        geo3D: {
          map: activeMap
        }
      }
      chart?.setOption(option)
    }
    onMounted(() => {
      const chartMap = echarts.init(document.getElementById('chart') as HTMLElement)
      const option = {
        toolTip: {},
        geo3D: {
          viewControl: {
            projection: 'perspective',
            distance: 110,
            alpha: 30,
            beta: 1,
            animationDurationUpdate: 10
          },
          regionHeight: 7,
          map: 'beijing',
          light: { // 光照阴影
            main: {
              color: '#39bfed', // 光照颜色
              shadowColor: 'red',
              intensity: 1.2, // 光照强度
              shadowQuality: 'high', // 阴影亮度
              shadow: true, // 是否显示阴影
              alpha: 35,
              beta: 10
            },
            ambient: {
              intensity: 0.1
            },
            ambientCubemap: {
              diffuseIntensity: 1
              // texture: lightPng
            },
            groundPlane: {
              show: true
            }
          },
          itemStyle: {
            borderWidth: 1
          },
          emphasis: {
            label: {
              show: false
            }
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          inRange: {
            color: ['#213695', '#042d6b']
          }
        }
      }
      chartMap.setOption(option)
      chart = chartMap
    })
    return {
      changeMap
    }
  }
})
</script>
<style lang="less" scoped>
#chart {
  width: 100%;
  height: 100vh;
}
</style>
zhixiaotong commented 2 years ago

我也遇到了,setOption(options, true)强制重绘就可以解决,但是还出现另一个问题,非中国地图,比如省级地图或者区县地图,无法高亮区域,见鬼了真的是。