关于maptalks实现水体渲染

线上效果图

maptalks-Demo - 水体效果

准备数据及地图

此处写的比较简单，如发现复制代码之后如有报错，请投进官网的怀抱

// 引入 maptalks
import * as maptalks from "maptalks";
import * as maptalksGl from "@maptalks/gl-layers";

// 创建地图
const map = new maptalks.Map("map", {
        center: [116.391834,39.907696],
        zoom: 14,
});
// 创建基础图层
const baseLayer = new maptalks.TileLayer("base", {
	urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
	subdomains: ["a", "b", "c", "d"],
})
// 创建gl图层 sceneConfig 值参考 [官网配置项](https://doc.maptalks.com/docs/api/gl/group-gl-layer/)
const glOptions = {sceneConfig}
const glLayer = new maptalksGl.GroupGLLayer("maptalksGl_3D",
		baseLayers,glOptions).addTo(map);
// 水面的坐标集合
const polygons = [[116.391834,39.907696]...]

实现水体效果

// 设置style并使用[lit渲染插件](https://doc.maptalks.com/docs/style/plugin-lit/)， 这里我主要是为了过滤出来哪些面是需要渲染成水体的,并且渲染海拔高度
//（可能理解的比较片面，如果有其他的作用也可以踢我一脚）
const style = [
  {
    renderPlugin: {
      type: "lit",
    },
    // 数据的过滤条件 过滤出Polygon类型中id包含water
    filter: ["all", ["==", "$type", "Polygon"], ["contains", "id", "water"]],
    symbol: {
      visible: true,
      ssr: true,
    }
  },
];
// 这里是设置材质 详细参考[官网材质配置说明](https://doc.maptalks.com/docs/style/material/)
const material = {
  // 开启ssr
  ssr: true,
  // 发现纹理的路径，支持url或者base64
  normalTexture: texWaveNormal,
  // 环境光遮蔽纹理的路径，支持url或者base64
  occlusionTexture: texWavePerturbation,
  // 自发光颜色值
  emissiveFactor: [0.3, 0.5, 0.1],
  // uv坐标缩放比例。
  uvScale: [0.2, 0.2],
  // 纹理旋转角度，单位度，0 - 360
  uvRotation: 20,
  // uv方向上的偏移动画，不为1时开启动画，绝对值越大动画越快，负值时则反方向动画
  uvOffsetAnim: [1, 3],
};
// 这里是新创建一个ExtrudePolygonLayer图层（此图层官网未上，详细可自行咨询官方）
const PolygonLayer = new maptalksGl.ExtrudePolygonLayer("PolygonLayer", {
  style,
  material,
  dataConfig: {
    type: "3d-extrusion",
    // 材质默认海拔高度 静态设置海拔高度 
    defaultAltitude: 30,
    // 材质顶部高度属性名称 用于动态设置海拔高度 如果该属性不为null，则覆盖默认海拔高度
    altitudeProperty: "height",
    altitudeScale: 1,
    top: true,
    side: true,
  }
}).addTo(glLayer);
// 这里新创建一个Polygon图形，并添加至PolygonLayer 图层中
const p = new maptalks.Polygon([polygons], {
  symbol: {
    topPolygonFill: "#2b9fd7cc",
    bottomPolygonFill: "#004bb5",
  },
  properties: {
  	// 参与style中的过滤
    id: "water1",
    // 设置海拔高度 
    "height": 50
  },
}).addTo(PolygonLayer);

以上就可以是视频中的效果了

参考如下

maptalks-官网
maptalksgl-官网
maptalks-示例中心
材质配置说明
lit渲染插件配置说明