重庆大屏地图

sgzb-screen/src/components/home/center3DMap.vue

@@ -79,6 +79,7 @@
       setMapOption(name) {
         var option = {
             backgroundColor: 'rgba(0,0,0,0)',
+ 
             series: [
             {
                 name: 'MAP',
@@ -87,24 +88,23 @@
                 zlevel: -10,
                 boxWidth: 150,
                 boxHeight:60,
-                boxDepth: 110,//地图倾斜度
+                boxDepth: 90,//地图倾斜度
                 regionHeight: 5,//地图厚度
                 label: {
                     show: true,//是否显示市 
                     textStyle: {
                         color: "#fff",//文字颜色
-                        fontSize: 10,//文字大小
-                        fontFamily: '微软雅黑',
+                        fontSize: 14,//文字大小
+                        // fontFamily: '微软雅黑',
                         backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景 
                     },
                 },
                 //三维视觉属性
                 itemStyle: { 
-                    opacity:0.5,
-                    color: '#2C59C7',//地图颜色  
-                    areaColor: '#3978C8', 
+                    opacity:1,
+                    color: 'rgba(35, 72, 174,0.5)',//地图颜色
                     borderWidth: 1.5,
-                    borderColor: '#7BE7FC'
+                    borderColor: 'rgb(125, 239, 250)'
                 },
                 // 鼠标hover高亮
                 emphasis: {
@@ -122,13 +122,29 @@
                         borderWidth:3,
                     }
                 },
+                shading: 'lambert',       // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
+                // 'color' 只显示颜色，不受光照等其它因素的影响。
+                // 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
+                // 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
+                // realisticMaterial: {}    // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
+                // lambertMaterial: {}      // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
+                // colorMaterial: {}        // color 材质相关的配置项，在 shading 为'color'时有效。
                 light: {
-                    main: {
-                        intensity:1,
-                        shadow: true,
-                        shadowQuality: 'ultra',
-                    },
-        
+                  // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
+                  main: {
+                    // 场景主光源的设置，在 globe 组件中就是太阳光。
+                    color: '#fff', // 主光源的颜色。[ default: #fff ]
+                    intensity: 1.2, // 主光源的强度。[ default: 1 ]
+                    shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
+                    // shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
+                    alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
+                    beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
+                  },
+                  ambient: {
+                    // 全局的环境光设置。
+                    color: '#fff', // 环境光的颜色。[ default: #fff ]
+                    intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
+                  }
                 },
                 groundplane: {
                     show: false
@@ -152,7 +168,7 @@
                     maxAlpha:80,
                     minBeta:-25,
                     maxBeta:45,
-                    center:[0,0,10],
+                    center:[0,0,0],
                     animation: true,
                     animationDurationUpdate: 1000,
                     animationEasingUpdate: 'cubicInOut'