样式

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

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

样式的分类

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

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

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

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

目前材质主要用于：

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

polygon类举例

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

line类举例

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

marker类举例

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

text类举例

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

样式组合

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

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像素，中间级别则线性变化。

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

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

渐变色

maptalks 样式系统里针对线条的颜色和面的填充色也提供了简单的渐变色支持:

var line = new maptalks.LineString([c.sub(0.01, 0), c], {
    symbol: {
        // linear gradient
        lineColor: {
            type: "linear", // or radial
            colorStops: [
                [0.0, "red"],
                [1 / 4, "orange"],
                [2 / 4, "green"],
                [3 / 4, "aqua"],
                [1.0, "white"],
            ],
        },
        lineWidth: 10,
    },
}).addTo(layer);

var rect1 = new maptalks.Rectangle(c.sub(0.03, 0), 600, 600, {
    symbol: {
        polygonFill: {
            type: "radial", // or linear
            colorStops: [
                [0.0, "#fff"],
                [0.5, "#fff27e"],
                [1, "#f87e4b"],
            ],
        },
        polygonOpacity: 1,
        lineColor: "#fff",
    },
}).addTo(layer);

linear 和 radial 分别对应canvas的createLinearGradient和createRadialGradient,看到这里你肯定已经猜出来了colorStops是啥意思了:就是色带,所以根据自己的需求配置色带区间和选择不同的渐变方式即可

canvas createLinearGradient doc

const gradient = ctx.createLinearGradient(20, 0, 220, 0);

// 添加三个色标
gradient.addColorStop(0, "red");
gradient.addColorStop(1 / 4, "orange");
gradient.addColorStop(2 / 4, "green");
gradient.addColorStop(3 / 4, "aqua");
gradient.addColorStop(1, "white");

颜色插值

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

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

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

圆角矩形

TTMV0NN%25SU8OYHP5KBEZ%25D4.png

maptalks version>=1.3.0 maptalks-gl version>=0.111.0 里我们添加了矢量圆角矩形的支持

maptalks 里所有的图层都支持，如果你发现哪个图层支持有问题请给我们报告

roundrectangle marker demo

const sybmol = {
    markerType: "roundrectangle",
    // markerType: "rectangle",
    markerFill: "green",
    markerFillOpacity: 0.5,
    markerWidth: width,
    markerHeight: height,
    markerLineWidth: 2,
    // markerLineDasharray: [5, 5],
    markerHorizontalAlignment: "center",
    markerVerticalAlignment: "top",
};

样式 ​

样式的分类 ​

polygon类举例 ​

line类举例 ​

marker类举例 ​

text类举例 ​

样式组合 ​

funtion-type ​

渐变色 ​

颜色插值 ​

圆角矩形 ​

样式