echarts三维建筑地图注解

最新推荐文章于 2024-04-23 18:23:10 发布

magnetoY

最新推荐文章于 2024-04-23 18:23:10 发布

阅读量1.4k

点赞数 1

文章标签：前端 js echarts

本文链接：https://blog.csdn.net/weixin_47235643/article/details/121475638

版权

代码主要来自echarts实例，本文是对实例做了些注解，最好还是复制下来自己试一下，具体配置看echarts官网


<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        <script type="text/javascript">
          var dom = document.getElementById("container");
          var myChart = echarts.init(dom);
          var app = {};
          var option;
          var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

          

          $.getJSON(
            ROOT_PATH + '/data-gl/asset/data/buildings.json',
            function (buildingsGeoJSON) {
              echarts.registerMap('buildings', buildingsGeoJSON);
              var regions = buildingsGeoJSON.features.map(function (feature) {
                return {
                  name: feature.properties.name,
                  value: Math.max(Math.sqrt(feature.properties.height), 0.1),
                  height: Math.max(Math.sqrt(feature.properties.height), 0.1)
                };
              });
              myChart.setOption({
                series: [
                  {
                    type: 'map3D',
                    map: 'buildings',
                    shading: 'realistic',   // 着色方式 'color': 只显示颜色  realistic: 真实感渲染   'lambert' 通过经典的 lambert 着色表现光照带来的明暗
                    realisticMaterial: { // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
                      roughness: 0.1,   // 光滑程度  0 - 1
                      textureTiling: 10,  // 这个材质 重复渲染多少次
                      detailTexture:
                        '换一个你喜欢的图片链接'
                    },
                    postEffect: { // 后处理特效的相关配置。后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
                      enable: true, // 是否开启后处理特效
                      bloom: { // 高光特效
                        enable: false
                      },
                      SSAO: {
                        enable: true,
                        quality: 'medium',
                        radius: 10,
                        intensity: 1.2
                      }, 
                      depthOfField: { // 景深效果
                        enable: false,
                        focalRange: 5, // 焦距
                        fstop: 1, // 镜头的F值，值越小景深越浅
                        blurRadius: 10 // 焦外的模糊半径
                      }
                    },
                    groundPlane: { // 是否显示地面
                      show: true,
                      color: '#333'
                    },
                    light: {
                      main: {
                        intensity: 6,
                        shadow: true,
                        shadowQuality: 'high',
                        alpha: 30
                      },
                      ambient: {
                        intensity: 0
                      },
                      ambientCubemap: {
                        texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',  // 光源文件
                        exposure: 2,
                        diffuseIntensity: 1,
                        specularIntensity: 1
                      }
                    },
                    viewControl: { 
                      // minBeta: -360,  // 这俩属性不知道有啥意义
                      // maxBeta: 360,
                      panSensitivity: 1, // 平移敏感度 0-1
                      zoomSensitivity: 1 // 缩放敏感度 0-1
                    },
                    itemStyle: {
                      areaColor: 'red'
                    },
                    label: {
                      show: false,
                      color: 'red'
                    },
                    silent: true,  // 辅助触发事件
                    instancing: true, // 提高绘图效率的
                    boxWidth: 200,
                    boxHeight: 1,
                    data: regions
                  }
                ]
              });
            }
            );


            if (option && typeof option == 'object') {
                myChart.setOption(option);
            }


          myChart.getZr().on('click',function(e){
            console.log(e)
          });

        </script>
    </body>
</html>

magnetoY

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
echarts三维建筑地图注解

代码主要来自echarts实例，本文是对实例做了些注解，最好还是复制下来自己试一下，具体配置看echarts官网<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id.
复制链接

扫一扫