唯杰地图 logo唯杰地图
VJMAP
EN

svr-style-var

vjmap/references/backend/svr-style-var.md 4.7 KB140 行
原文

本文回答：svrStyleVar 服务端条件过滤/高亮：不需要查数据、直接让服务端在生成瓦片时给某些实体换样式。

一、适用场景

  • 想让"所有红线"以黄色显示；
  • 想"隐藏所有图层 2 的实体"；
  • 想"把某个 objectid 描红"；

而这一切不需要在前端再查询 + 叠加 Polygon/Polyline。服务端直接生成对应样式的瓦片。

二、样式表达式变量

同 query-expression 的变量（gInFeatureType, gInLayerName, gInColor, gInAttrn11 ...）；输出变量：

输出变量 作用
gOutColorRed/Green/Blue/Alpha 修改 RGB 分量
gOutLineWidth 修改线宽
gOutVisible 1 显示 / 0 隐藏

支持按缩放级别：gOutColorRed[3] := 255 表示 3 级以上用 255。

语法判定：表达式含 := 且不含 return///js → 按 C 风格（exprtk）编译，逻辑运算只能写 and/or（&&/|| 编译失败）；否则按 JS 执行（= 赋值 + &&/||）。两种语法不要混写。

三、使用入口：serverRenderStyle

await svc.openMap({
  mapid, version,
  mapopenway: vjmap.MapOpenWay.GeomRender,
  style: {
    ...vjmap.openMapDarkStyle(),
    // 或者直接传字符串表达式
    expression: `
      if (gInFeatureType == 'AcDbCircle' and gInAttrn12 == 5) {
        gOutColorRed := 255;
        gOutColorGreen := 0;
        gOutColorBlue := 0;
      }
      if (gInLayerName == '辅助') {
        gOutVisible := 0;
      }
    `
  }
});

四、常用用例

1) 高亮指定 objectid

style: { expression: `
  if (gInObjectId == '9BE') {
    gOutColorRed := 255; gOutColorGreen := 255; gOutColorBlue := 0;
    gOutLineWidth := 3;
  }
` }

2) 按级别渐变色（不同 zoom 不同颜色）

gOutColorRed[0] := 0;    gOutColorGreen[0] := 128; gOutColorBlue[0] := 0;   // 0~4 级
gOutColorRed[5] := 255;  gOutColorGreen[5] := 0;   gOutColorBlue[5] := 0;   // 5 级以上

3) 整体滤镜

使用内置样式函数（见 svrStyleVar 原文）。全部滤镜函数（服务端注册）：

gFilterGrey(r,g,b)            灰度（均值）     gFilterGreyMin / gFilterGreyMax / gFilterWeight / gFilterBlackWhite
gFilterOpposite(r,g,b)        反色            gFilterMaxAvg / gFilterRed / gFilterGreen / gFilterBlue
gFilterRemoveRed/Green/Blue   去某色分量      gFilterOld（怀旧）/ gFilterFusion（融合）/ gFilterFrozen（冰冻）
gFilterComic / gFilterBrown   卡通 / 棕色     gFilterBlueTheme / gFilterRedTheme / gFilterGreenTheme（主题色）
gFilterCustomTheme(r,g,b,maxr,maxg,maxb)      自定义主题
gRed(color) / gGreen(color) / gBlue(color)    从打包色值取分量（配合 gFilter* 返回值用）

用法：

style: { expression: `
  var newColor := gFilterGrey(gInColorRed, gInColorGreen, gInColorBlue);
  gOutColorRed := gRed(newColor);
  gOutColorGreen := gGreen(newColor);
  gOutColorBlue := gBlue(newColor);
` }

五、条件过滤（只显示一部分）

// 只显示指定图层索引 0 和 3
style: { expression: `
  if (gInLayerIndex != 0 and gInLayerIndex != 3) {
    gOutVisible := 0;
  }
` }

六、变量 vs 字段对照

表达式里的 gInAttrnXX 对应后台表中的 nY：

表达式变量 表字段
gInAttrn6 n1（颜色索引）
gInAttrn7 n2（线型比例）
gInAttrn8 n3（线宽）
gInAttrn9 n4（透明度）
gInAttrn10 n5
gInAttrn11 n6
gInAttrn12 n7
gInAttrn13 n8
gInAttrn14 n9
gInAttrn15 n10

七、优缺点 vs 前端 Polygon/Polyline 高亮

维度 svrStyleVar 前端绘制
性能 好（服务端 tile 级别过滤） 中等（大量实体时卡）
交互 无法响应 hover/click（只是像素） 可以 hover、点击、弹窗
动态更新 需改 style 重新生成瓦片 setData 秒变
使用难度 中（要学表达式） 低

通常做法：

  • 静态标亮（档案态 / 只展示） → svrStyleVar。
  • 交互式选择、hover → 前端 Polygon/Polyline。

八、常见坑

  1. expression 写了但 mapopenway 是内存 → 表达式需要几何模式。
  2. 写 gOutVisible := 0; 却没 if 包裹 → 会隐藏所有实体，屏幕空白。
  3. 样式改了没生效 → style 的 cache 可能让前端用老 tile。map.setStyle({...}) 再 map.fitMapBounds() 可强制刷新。
  4. 表达式中文注释导致编译失败 → 早期版本只支持 C 风格注释 // xxx，注意不要写 # xxx。