【feature】1) webmap ol提交点符号支持偏移和旋转

           2） webmap ol点标签和线标签支持位置设置
           3） webmap ol标签增加阴影颜色
（reviewed by chengl）

Author: Yuki-Zhao

src/openlayers/core/StyleUtils.js

@@ -610,6 +610,8 @@ export class StyleUtils {
       lineCap,
       src,
       scale,
+      offsetX,
+      offsetY,
       //size,
       //imgSize,
       anchor
@@ -647,14 +649,15 @@ export class StyleUtils {
         }
       } else {
         newImage = new CircleStyle({
-          radius: radius,
+          radius,
           fill: new FillStyle({
             color: fillColorArray
           }),
           stroke: new StrokeStyle({
             width: strokeWidth || ZERO,
             color: strokeColorArray
-          })
+          }),
+          displacement: this.getCircleDisplacement(radius, offsetX, offsetY)
         });
       }
       olStyle.setImage(newImage);
@@ -692,6 +695,44 @@ export class StyleUtils {
     return olStyle;
   }
 
+  /**
+   * @function ol.supermap.StyleUtils.getIconAnchor
+   * @description 获取图标的锚点
+   * @param {number} offsetX - X方向偏移分数
+   * @param {number} offsetY - Y方向偏移分数
+   * @returns {array}
+   */
+  static getIconAnchor(offsetX, offsetY) {
+    return [offsetX, offsetY];
+  }
+  /**
+   * @function ol.supermap.StyleUtils.getCircleDisplacement
+   * @description 获取圆圈的偏移
+   * @param {number} radius - 圆圈半径
+   * @param {number} offsetX - X方向偏移分数
+   * @param {number} offsetY - Y方向偏移分数
+   * @returns {array}
+   */
+  static getCircleDisplacement(radius, offsetX, offsetY) {
+      const dispX = radius*offsetX, dispY = radius*offsetY;
+      return [dispX, -dispY];
+  }
+  /**
+   * @function ol.supermap.StyleUtils.getTextOffset
+   * @description 获取字体图标的偏移值
+   * @param {string} fontSize - 字体大小，如12px
+   * @param {number} offsetX - X方向偏移分数
+   * @param {number} offsetY - Y方向偏移分数
+   * @returns {object}
+   */
+  static getTextOffset(fontSize, offsetX, offsetY) {
+    const radius = fontSize.substr(0, fontSize.length - 2) / 2;
+    return {
+          x: radius*offsetX, 
+          y: radius*offsetY
+    };     
+  }
+
   /**
    * 获取文字标注对应的canvas
    * @param style
@@ -1033,23 +1074,28 @@ export class StyleUtils {
 
     let fontSize = isRank ? 2 * parameters.radius + "px" : parameters.fontSize;
 
+    const {offsetX, offsetY, rotation} = parameters;
+    const offset = StyleUtils.getTextOffset(fontSize, offsetX, offsetY);
     return new Style({
-      text: new Text({
-        text: text,
-        font: fontSize + " supermapol-icons",
-        placement: 'point',
-        textAlign: 'center',
-        fill: new FillStyle({
-          color: fillColor
-        }),
-        backgroundFill: new FillStyle({
-          color: [0, 0, 0, 0]
-        }),
-        stroke: new StrokeStyle({
-          width: parameters.strokeWidth || 0.000001,
-          color: strokeColor
+        text: new Text({
+            text: text,
+            font: fontSize + " supermapol-icons",
+            placement: 'point',
+            textAlign: 'center',
+            fill: new FillStyle({
+              color: fillColor
+            }),
+            backgroundFill: new FillStyle({
+              color: [0, 0, 0, 0]
+            }),
+            stroke: new StrokeStyle({
+              width: parameters.strokeWidth || 0.000001,
+              color: strokeColor
+            }),
+            offsetX: offset.x,
+            offsetY: offset.y,
+            rotation
         })
-      })
     });
   }
   /**
@@ -1063,14 +1109,18 @@ export class StyleUtils {
       that.svgDiv = document.createElement('div');
       document.body.appendChild(that.svgDiv);
     }
-    StyleUtils.getCanvasFromSVG(styleParams.url, that.svgDiv, function (canvas) {
+    const { url, radius, offsetX, offsetY, fillOpacity, rotation } = styleParams;
+    let anchor = this.getIconAnchor(offsetX, offsetY);
+    StyleUtils.getCanvasFromSVG(url, that.svgDiv, function (canvas) {
       style = new Style({
         image: new Icon({
           img: that.setColorToCanvas(canvas, styleParams),
-          scale: styleParams.radius / canvas.width,
+          scale: 2 * radius / canvas.width,
           imgSize: [canvas.width, canvas.height],
-          anchor: [0.5, 0.5],
-          opacity: styleParams.fillOpacity
+          anchor: anchor || [0.5, 0.5],
+          opacity: fillOpacity,
+          anchorOrigin: 'bottom-right',
+          rotation
         })
       });
     });
@@ -1111,14 +1161,17 @@ export class StyleUtils {
       //要组装成完整的url
       imgDom.src = imageInfo.url;
     }
+    const { offsetX, offsetY, rotation } = styleParams;
+    let anchor = this.getIconAnchor(offsetX, offsetY);
     return new Style({
       image: new Icon({
         img: imgDom,
         scale,
         imgSize: [size.w, size.h],
-        anchor: [0.5, 0.5]
+        anchor: anchor || [0.5, 0.5],
+        anchorOrigin: 'bottom-right',
+        rotation
       })
     });
   }
-
 }

src/openlayers/mapping/WebMap.js

@@ -40,6 +40,7 @@ import * as olSource from 'ol/source';
 import Feature from 'ol/Feature';
 import Style from 'ol/style/Style';
 import FillStyle from 'ol/style/Fill';
+import StrokeStyle from 'ol/style/Stroke';
 import Text from 'ol/style/Text';
 import Collection from 'ol/Collection';
 import { containsCoordinate, getCenter } from "ol/extent";
@@ -1112,6 +1113,25 @@ export class WebMap extends Observable {
             that.errorCallback && that.errorCallback(error, 'getWmtsFaild', that.map)
         });
     }
+    /**
+     * @private
+     * @function ol.supermap.WebMap.prototype.getWMTSUrl
+     * @description 获取wmts请求文档的url
+     * @param {string} url - 图层信息。
+     * @param {boolean} isKvp - 是否为kvp模式
+     */
+    getWMTSUrl(url, isKvp) {
+        let splitStr = '?';
+        if (url.indexOf('?') > -1) {
+            splitStr = '&'
+        }
+        if (isKvp) {
+            url += splitStr + 'SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities';
+        } else {
+            url += splitStr + '/1.0.0/WMTSCapabilities.xml';
+        }
+        return this.getRequestUrl(url);
+    }
 
     /**
      * @private
@@ -1126,7 +1146,8 @@ export class WebMap extends Observable {
             withCredentials: true,
             withoutFormatSuffix: true
         };
-        return FetchRequest.get(that.getRequestUrl(layerInfo.url), null, options).then(function (response) {
+        const isKvp = !layerInfo.requestEncoding || layerInfo.requestEncoding === 'KVP';
+        return FetchRequest.get(that.getWMTSUrl(layerInfo.url, isKvp), null, options).then(function (response) {
             return response.text();
         }).then(function (capabilitiesText) {
             const format = new WMTSCapabilities();
@@ -1174,8 +1195,7 @@ export class WebMap extends Observable {
                 } else {
                     extent = olProj.get(that.baseProjection).getExtent()
                 }
-                const isKvp = !layerInfo.requestEncoding || layerInfo.requestEncoding === 'KVP';
-                layerInfo.tileUrl = that.getTileUrl(capabilities.OperationsMetadata.GetTile.DCP.HTTP.Get, isKvp, layerInfo.layer, layerInfo.tileMatrixSet);
+                layerInfo.tileUrl = that.getTileUrl(capabilities.OperationsMetadata.GetTile.DCP.HTTP.Get, layer, layerFormat,  isKvp);
                 //将需要的参数补上
                 layerInfo.extent = extent;
                 layerInfo.matrixSet = matrixSet;
@@ -1203,22 +1223,23 @@ export class WebMap extends Observable {
      * @function ol.supermap.WebMap.prototype.getTileUrl
      * @description 获取wmts的图层参数。
      * @param {array} getTileArray - 图层信息。
-     * @param {boolean} isKvp - 是否是kvp方式
      * @param {string} layer - 选择的图层
-     * @param {string} matrixSet -选择比例尺
-     */
-    getTileUrl(getTileArray, isKvp, layer, matrixSet) {
-        let url, type = isKvp ? 'KVP' : 'RESTful';
-        getTileArray.forEach(data => {
-            if(data.Constraint[0].AllowedValues.Value[0].toUpperCase() === type.toUpperCase()) {
-                url = data.href;
-            }      
-        })
-        if(!isKvp) {
-            //Restful格式
-            url = `${url}${layer}/default/${matrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png`;
-            //supermap iserver发布的restful会有一个？
-            url = url.replace('?', '/');
+     * @param {string} format - 选择的出图方式
+     * @param {boolean} isKvp - 是否是kvp方式
+     */
+    getTileUrl(getTileArray, layer, format, isKvp) {
+        let url;
+        if(isKvp) {
+            getTileArray.forEach(data => {
+                if(data.Constraint[0].AllowedValues.Value[0].toUpperCase() === 'KVP') {
+                    url = data.href;
+                }      
+            })
+        } else {
+            const reuslt = layer.ResourceURL.filter(resource => {
+                return resource.format === format;
+            })
+            url = reuslt[0].template;
         }
         return url;
     }
@@ -2410,28 +2431,41 @@ export class WebMap extends Observable {
      */
     getLabelStyle(parameters, layerInfo) {
         let style = layerInfo.style || layerInfo.pointStyle;
-        let radius = style.radius || 0;
-        let strokeWidth = style.strokeWidth || 0;
-        let offsetY = -1.8 * radius - strokeWidth;
-        if (offsetY > -20) {
-            offsetY = -20;
+        const {radius=0, strokeWidth=0} = style,
+            beforeOffsetY =  -(radius + strokeWidth);
+        const {
+            fontSize = '14px',
+            fontFamily,
+            fill,
+            backgroundFill,
+            offsetX = 0,
+            offsetY = beforeOffsetY,
+            placement = "point",
+            textBaseline = "bottom",
+            textAlign='center',
+            outlineColor = "#000000",
+            outlineWidth = 0
+            } = parameters;
+        const option = {
+            font: `${fontSize} ${fontFamily}`,
+            placement,
+            textBaseline,
+            textAlign,
+            fill: new FillStyle({ color: fill }),
+            backgroundFill: new FillStyle({ color: backgroundFill }),
+            padding: [3, 3, 3, 3],
+            offsetX: layerInfo.featureType === 'POINT' ? offsetX : 0,
+            offsetY: layerInfo.featureType === 'POINT' ? offsetY : 0
+        };
+        if (outlineWidth > 0) {
+        option.stroke = new StrokeStyle({
+            color: outlineColor,
+            width: outlineWidth
+        });
         }
-        parameters.offsetY = offsetY;
 
         return new Style({
-            text: new Text({
-                font: `${parameters.fontSize || '14px'} ${parameters.fontFamily}`,
-                placement: 'point',
-                textAlign: 'center',
-                fill: new FillStyle({
-                    color: parameters.fill
-                }),
-                backgroundFill: new FillStyle({
-                    color: parameters.backgroundFill || [255, 255, 255, 0.7]
-                }),
-                padding: [3, 3, 3, 3],
-                offsetY: parameters.offsetY
-            })
+            text: new Text(option)
         });
     }