WebGL加载地图临时图层解决方法

作者：yyy

• 一、场景

有完整地图，Web项目中需要根据不同客户校色、不同场景、多重条件展示符合要求的地图要素。

• 二、解决办法

利用已有地图，进行sql条件过滤，得到临时地图图层。

• 三、操作流程

3.1对已有地图发布地图服务

地图服务若已存在可略过此步；

示例：http://localhost:8090/iserver/services/map-world-2/rest/maps/世界地图

3.2操作页面

http://localhost:8090/iserver/services/map-world-2/rest/maps/世界地图/tempLayersSet?returnPostAction=true&getMethodForm=true

3.3创建临时图层

在下图中【创建临时图层】下方按钮勾选上即可

3.4原始临时图层

上述步骤后，右侧框内会得到如下字符

[{"completeLineSymbolDisplayed":false, "visible":true, "maxScale":0, "caption":null, "description":"", "symbolScalable":false, "subLayers":{"layers":[{"joinItems":null, "completeLineSymbolDisplayed":false, "ugcLayerType":"VECTOR", "displayFilter":null, "visible":true, "maxScale":0, "fieldValuesDisplayFilter":{"fieldName":"", "values":[], "fieldValuesDisplayMode":"DISABLE"}, "caption":"Countries@world", "description":"", "symbolScalable":false, "subLayers":{}, "type":"UGC", "datasetInfo":{"schema":null, "charset":null, "recordCount":0, "isFileCache":false, "description":null, "type":"REGION", "dataSourceName":"world", "tableName":null, "isReadOnly":false, "encodeType":null, "bounds":{"top":83.62359619140628, "left":-180, "bottom":-90, "leftBottom":{"x":-180, "y":-90}, "right":180, "rightTop":{"x":180, "y":83.62359619140628}}, "name":"Countries", "prjCoordSys":null, "datasourceConnectionInfo":null}, "queryable":true, "opaqueRate":100, "minVisibleGeometrySize":0.1, "name":"Countries@world", "bounds":{"top":83.62359619140628, "left":-180, "bottom":-90, "leftBottom":{"x":-180, "y":-90}, "right":180, "rightTop":{"x":180, "y":83.62359619140628}}, "style":{"fillGradientOffsetRatioX":0, "markerSize":2.4, "fillForeColor":{"red":224, "green":207, "blue":226, "alpha":255}, "fillGradientOffsetRatioY":0, "markerWidth":0, "markerAngle":0, "fillSymbolID":0, "lineColor":{"red":102, "green":102, "blue":102, "alpha":255}, "markerSymbolID":0, "lineWidth":0.1, "markerHeight":0, "fillOpaqueRate":100, "fillBackOpaque":false, "fillBackColor":{"red":255, "green":255, "blue":255, "alpha":255}, "fillGradientMode":"NONE", "lineSymbolID":0, "fillGradientAngle":0}, "displayOrderBy":null, "symbolScale":0, "minScale":0, "representationField":""}]}, "type":"UGC", "queryable":false, "opaqueRate":100, "minVisibleGeometrySize":0, "name":"世界地图", "bounds":{"top":83.62359619140628, "left":-180, "bottom":-90, "leftBottom":{"x":-180, "y":-90}, "right":180, "rightTop":{"x":180, "y":83.62359619140628}}, "symbolScale":0, "minScale":0}]

3.5设置过滤条件

确定过滤条件后，可对上述字符串进行修改，现对3.4中字符串进行参数解释：

"name":"Countries"：需要过滤的图层名称

"queryable":true：当前临时图层是否可查询，如果此参数为false，设置过滤条件无效

"displayFilter":null：设置过滤条件处，例如条件为smid>200，此参数可修改为："displayFilter":"smid>200"

修改过滤条件后的字符串如下：

[{"completeLineSymbolDisplayed":false, "visible":true, "maxScale":0, "caption":null, "description":"", "symbolScalable":false, "subLayers":{"layers":[{"joinItems":null, "completeLineSymbolDisplayed":false, "ugcLayerType":"VECTOR", "displayFilter":"smid>200", "visible":true, "maxScale":0, "fieldValuesDisplayFilter":{"fieldName":"", "values":[], "fieldValuesDisplayMode":"DISABLE"}, "caption":"Countries@world", "description":"", "symbolScalable":false, "subLayers":{}, "type":"UGC", "datasetInfo":{"schema":null, "charset":null, "recordCount":0, "isFileCache":false, "description":null, "type":"REGION", "dataSourceName":"world", "tableName":null, "isReadOnly":false, "encodeType":null, "bounds":{"top":83.62359619140628, "left":-180, "bottom":-90, "leftBottom":{"x":-180, "y":-90}, "right":180, "rightTop":{"x":180, "y":83.62359619140628}}, "name":"Countries", "prjCoordSys":null, "datasourceConnectionInfo":null}, "queryable":true, "opaqueRate":100, "minVisibleGeometrySize":0.1, "name":"Countries@world", "bounds":{"top":83.62359619140628, "left":-180, "bottom":-90, "leftBottom":{"x":-180, "y":-90}, "right":180, "rightTop":{"x":180, "y":83.62359619140628}}, "style":{"fillGradientOffsetRatioX":0, "markerSize":2.4, "fillForeColor":{"red":224, "green":207, "blue":226, "alpha":255}, "fillGradientOffsetRatioY":0, "markerWidth":0, "markerAngle":0, "fillSymbolID":0, "lineColor":{"red":102, "green":102, "blue":102, "alpha":255}, "markerSymbolID":0, "lineWidth":0.1, "markerHeight":0, "fillOpaqueRate":100, "fillBackOpaque":false, "fillBackColor":{"red":255, "green":255, "blue":255, "alpha":255}, "fillGradientMode":"NONE", "lineSymbolID":0, "fillGradientAngle":0}, "displayOrderBy":null, "symbolScale":0, "minScale":0, "representationField":""}]}, "type":"UGC", "queryable":false, "opaqueRate":100, "minVisibleGeometrySize":0, "name":"世界地图", "bounds":{"top":83.62359619140628, "left":-180, "bottom":-90, "leftBottom":{"x":-180, "y":-90}, "right":180, "rightTop":{"x":180, "y":83.62359619140628}}, "symbolScale":0, "minScale":0}]

3.6创建符合条件临时图层

       修改字符框中字符串后，点击【创建临时图层】按钮即可。

3.7加载临时图层

点击【tempLayers】按钮，我们可以看到生成的临时图层缩略图

然后我们可以拿到当前临时图层对应的layersID，当前范例生成的临时图层ID为7d5e91bfc6f944c8b01189e8e36cd944_15c708944bd64860af193cd6ae7a8ae3
然后我们就可以在webgl中加载当前的临时图层

加载情况如下：

• FAQ

1. 生成临时图层时时候需要注意如果不修改默认请求体，生成的临时图层是与原始的地图显示一致；
2. 在webgl加载临时图层时需要指定对应的layersID，即临时图层名。