轻松绘制 3D 地图板块，自由配置纹理样式

最新推荐文章于 2024-09-24 13:49:50 发布

Hzsilvana

最新推荐文章于 2024-09-24 13:49:50 发布

阅读量3.7k

点赞数 1

文章标签：地图 gis 前端

原文链接：https://zhuanlan.zhihu.com/p/489799796

版权

在大屏效果中，3D 地图往往会成为设计师首选的主视觉，因为 3D 地图不仅仅能将数据和地理空间位置结合起来，还足够炫酷好看，而且地图还可以作为 3D 楼宇、园区、以及城市的基座。

为了绘制上面的这些 3D 地图，最常见的做法就是使用 threejs/babylonjs 等常见的渲染引擎，自己拼接顶点构建地图版块，具体的实现可以参考下面的例子：

three.js examples2912401452.github.io/easyvExamples/

这种方法最大的问题就是自己绘制的地图板块无法和实际的地图对齐，因为地理地图使用经纬度地理坐标系，而我们在绘制的时候使用的笛卡尔坐标系（平面坐标系）。而且使用这种方式需要开发者熟悉 3D 引擎的使用，并且对网格构建的基本原理要有一定的了解。

为了能够快速，低成本的绘制板块地图，我们可以使用 antv/l7 的 PolygonLayer，通过添加一些简单的配置，同时添加一些其他的配套图层，快速开发出如下图层：

首先我们可以从 datav 提供的全国行政区划网站下载数据：DataV.GeoAtlas地理小工具系列首先我们可以从 datav 提供的全国行政区划网站下载数据：

DataV.GeoAtlas地理小工具系列datav.aliyun.com/portal/school/atlas/area_selector正在上传…重新上传取消

然后我们就可以引入 L7 对应的图层，快速完成开发

// 绘制地图板块
 const provincelayer = new PolygonLayer({})
        .source(data)
        .size(150000)
        .shape('extrude')
        .color('#0DCCFF')
        .active({
          color: 'rgb(100,230,255)'
        })
        .style({
          heightfixed: true,
          pickLight: true,
          raisingHeight: 200000,
          opacity: 0.8
        });

// 绘制地理围栏
const wall = new LineLayer()
        .source(data)
        .shape('wall')
        .size(150000)
        .style({
          heightfixed: true,
          opacity: 0.6,
          sourceColor: '#0DCCFF',
          targetColor: 'rbga(255,255,255, 0)'
        });

// 绘制边界线
const lineDown = new LineLayer()
        .source(data)
        .shape('line')
        .color('#0DCCFF')
        .size(1)
        .style({
          raisingHeight: 200000
        });

const lineUp = new LineLayer({ zIndex: 1 })
        .source(data)
        .shape('line')
        .color('#0DCCFF')
        .size(1)
        .style({
          raisingHeight: 200000 + 150000
        });
// 绘制省市名称
const textLayer = new PointLayer({ zIndex: 2 })
        .source(texts, {
          parser: {
            type: 'json',
            x: 'lng',
            y: 'lat'
          }
        })
        .shape('name', 'text')
        .size(14)
        .color('#0ff')
        .style({
          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
          spacing: 2, // 字符间距
          padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
          stroke: '#0ff', // 描边颜色
          strokeWidth: 0.2, // 描边宽度
          raisingHeight: 200000 + 150000 + 10000,
          textAllowOverlap: true
        });
      scene.addLayer(textLayer);

在线案例l7.antv.vision/zh/examples/polygon/3d#floatMap正在上传…重新上传取消

除了支持网格类型的 3D 板块地图，L7 的 PolygonLayer 还支持自由配置顶部的纹理贴图以及侧面的颜色渐变，效果可以参考下面的手绘地图：

手绘地图的代码就更加简单了

 const provincelayer = new PolygonLayer({})
        .source(data)
        .size(150000)
        .shape('extrude')
        .color('#0DCCFF')
        .style({
          heightfixed: true,
          pickLight: true,
          raisingHeight: 200000,
          mapTexture:
          'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0tmIRJG9cQQAAAAAAAAAAAAAARQnAQ',
          sourceColor: '#333',
          targetColor: '#fff'
        })

在线案例l7.antv.vision/zh/examples/polygon/3d#texture3D正在上传…重新上传取消

感兴趣的同学可以去 antv/l7 的官网查看具体的 api 和文档

文档传送门l7.antv.vision/zh/docs/api/polygon_layer/extrude正在上传…重新上传取消

欢迎大家来 GitHub 为 L7 提 PR！Issues！如果大家觉的 L7 对自己有帮助，欢迎来点点 Star！

GitHub - antvis/L7: Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps.github.com/antvis/L7正在上传…重新上传取消

最后，如果大家有关于 L7 使用的问题，欢迎大家加入 L7 的钉钉官方答疑群：32292906

欢迎大家使用 L7！