🌍maptalks study

Appearance

目录

样式 ​

样式即图形的皮肤，比如线的宽度，面的填充色，点的图片标注等

maptalks里样式系统是个比较复杂的东西，需要你仔细的阅读对应的文档,一开始maptalks里的样式仅仅是个二维的系统，后来开发了 @maptlalks/gl-layerswebgl插件包后，整个样式系统又扩展了三维的样式系统，加上整个样式统本身又支持 function-type故复杂度还是挺高的，需要耐心的阅读对应的文档

样式的分类 ​

虽然样式系统复杂，但是其可以主要分成几类：

类别描述
polygon填充类
line线条类
marker点的标注类
text文本类
material材质

其中 material材质时 @maptalks/gl-layers特有的：

材质是指三维渲染算法中，物体和光的交互过程中涉及到的参数。当前可用到的材质有pbr材质和phong（冯氏光照）两种材质。

目前材质主要用于：

VectorTileLayer的lit渲染插件(pbr材质)和phong渲染插件。 GLTF图层渲染模型默认的渲染材质是pbr材质。 Geo3DTilesLayer默认用的phong材质。

polygon类举例 ​

js
symbol:{
  polygonFill:'red',
  polygonOpaicty:0.6
}

line类举例 ​

js
symbol: {
    lineColor: "red";
    lineWidth: 2;
}

marker类举例 ​

js
symbol:{
  markerFile:'./poi.png'
  markerWidth:20,
  markerHeight:20
}

text类举例 ​

js
symbol:{
   textName:'hello maptalks',
   textFill:'#fff',
   textSize:14
}

样式组合 ​

样式混合指的是一个图形里可以多个样式分类，比如点图形的样式里既可以有marker类，也可以有text类

js
const symbol = [
    {
        markerType: "rectangle",
        markerWidth: nameWidth + 30,
        markerHeight: fontSize * 4,
        markerHorizontalAlignment: "middle",
        markerVerticalAlignment: "top",
        markerLineWidth: 0,
        markerFill: "#CBE7F5",
    },
    {
        markerType: "rectangle",
        markerWidth: nameWidth + 20,
        markerHeight: fontSize * 2,
        markerHorizontalAlignment: "middle",
        markerVerticalAlignment: "top",
        markerLineWidth: 2,
        markerFill: "#CBE7F5",
    },
    {
        markerType: "rectangle",
        markerWidth: nameWidth + 30,
        markerHeight: fontSize * 2,
        markerHorizontalAlignment: "middle",
        markerVerticalAlignment: "top",
        markerLineColor: "#CBE7F5",
        markerLineWidth: 0,
        markerFill: "#CBE7F5",
    },
    {
        textSize: fontSize,
        textName: "{name}",
        textDy: -fontSize * 3,
    },
    {
        textDy: -fontSize,
        textSize: fontSize,
        textName: "{type}",
    },
    {
        markerType: "ellipse",
        markerFill: "red",
        markerWidth: 4,
        markerHeight: 4,
    },
];

TIP

复杂的样式可以通过这种组合的方式来达到你的期望的需求,但是不是所有的样式都可以通过这种 方式来实现的，这里想表达的意思通过组合样式可以达到很多有意思的效果,取决于你的想象力

funtion-type ​

funtion-type表示样式的属性值可以是个表达式函数，比如一个点的图片大小随着地图缩放动态改变大小

这里以markerWidth为例： 以下的function-type定义能让图标的高宽随zoom级别线性变化。 1级上是4像素，20级上是20像素，中间级别则线性变化。

js
markerWidth: {
    stops: [
      [1, 4],
      [20, 20]
    ]
  },

关于function-type的具体文档请参考 function-type文档

颜色插值 ​

maptalks样式系统里的function-type补充了个颜色插值，方便用户根据业务的信息给图形自动配色,其maptalks的一个特色功能

js
symbol: {
              markerWidth: 2,
              markerHeight: 2,
              markerType: 'ellipse',
              markerFill: {
                type: 'color-interpolate',
                property: 'value',
                stops: [
                  [0, 'green'],
                  [50, 'yellow'],
                  [360, 'red']
                ]
              },
              markerLineWidth: 0
            }

这个样式表示markerFill根据图形属性的value来自动进行颜色插值，给每个图形自动配置出对应的颜色

This document is generated by mdpress