1.地图的每个地图板块单独设置背景颜色

 regions: [

            {

              name: '省份名称',

              itemStyle: {

                color: '#ff6600'

              }

            },...]

2.地图的旋转 移动等等...

 viewControl: {

            autoRotate: false,

            beta: 0, // x轴旋转

            alpha: 65, // Y轴旋转

            // panMouseButton: 'center', // 平移操作使用的鼠标按键

            // rotateMouseButton: 'left', // 旋转操作使用的鼠标按键

            rotateSensitivity: 0, // 禁止旋转地图

            // // 下面的四个参数 可以实现禁止缩放地图

            projection: 'orthographic',

            orthographicSize: 95,

            maxOrthographicSize: 95,

            minOrthographicSize: 95

          }

3.地图的层级

 regionHeight: 3, // 修改整个地图的三维高度,

4.鼠标放上去的高亮

emphasis的属性没有起作用,这里用了silent: true 为true时取消地图高亮

5.地图的点击事件

geo3D地图 本来没有点击事件 需要添加一个点击的数据区域 也就是在上面添加一层地图 让上面的地图成为可点击的数据区域 (上面的地图配置和下面的地图配置要一致 位置啥的保持一致 不然点击的区域可能会有偏移)

展示地图

 geo3D: {
          type: 'map3D',
          boxWidth: 70,
          bottom: 50,
          map: '1212', // 注册地图的名字
          itemStyle: {
            color: '#4189f2', // 背景颜色
            opacity: 1, // 透明度
            borderWidth: 0.8,
            borderColor: '#fff'
          },
          // 地图单个板块标签样式
          label: {
            show: false,
            textStyle: {
              show: false,
              // 字体样式
              color: '#fff',
              opacity: 1,
              fontSize: 16,
              backgroundColor: 'transparent'
            }
          },
          // 鼠标放入高亮时地图板块的样式
           silent: true,
          
          // 每个地图板块单独设置背景颜色
          regions: [
            {
              name: '123', // 你要显示的省份名称
              itemStyle: {
                color: '#ff6600'
              }
            },
          
          ],
          regionHeight: 3, // 修改整个地图的三维高度,
          viewControl: {
            autoRotate: false,
            beta: 0, // x轴旋转
            alpha: 65, // Y轴旋转
            // panMouseButton: 'center', // 平移操作使用的鼠标按键
            // rotateMouseButton: 'left', // 旋转操作使用的鼠标按键
            rotateSensitivity: 0, // 禁止旋转地图
            // // 下面的四个参数 可以实现禁止缩放地图
            projection: 'orthographic',
            orthographicSize: 95,
            maxOrthographicSize: 95,
            minOrthographicSize: 95
          }
        },

数据地图

{
            type: 'map3D', // 新增一条数据区域图标
            map: '名称',
            roam: false,
            boxWidth: 70,
            bottom: 50,
            itemStyle: {
              opacity: 0 // 设置透明度后,就不影响原来的图配色等功能
            },
            zlevel: 100, // 设置层级,如不设置假如其他图标高则无法触发点击事件
            data: [],
            viewControl: {
              autoRotate: false,
              beta: 0, // x轴旋转
              alpha: 65, // Y轴旋转
              // panMouseButton: 'center', // 平移操作使用的鼠标按键
              // rotateMouseButton: 'left', // 旋转操作使用的鼠标按键
              rotateSensitivity: 0, // 禁止旋转地图
              // // 下面的四个参数 可以实现禁止缩放地图
              projection: 'orthographic',
              orthographicSize: 95,
              maxOrthographicSize: 95,
              minOrthographicSize: 95
            },
            itemStyle: {
              show: false,
              color: '#22c9fb'
            }
          }
          },

这个地方会发现 数据区域没有设置关闭鼠标的高亮操作 是因为如果这个数据区域的地图也设置了的话 会起不到点击作用 

6.地图上的行政区划 

这个地方有点拉跨 在seiers中又加了一个地图 

地图可以加进去 但是出现的问题就是整个页面会变得卡顿  (有大佬可以给个好的建议)

7.点击的时候层级叠加 

很简单 地图的点击事件 然后将regionHeight: 3 的值改变就可以

Logo

更多推荐