【feature】1）Webmap对接道路线样式和铁路线样式

（reviewed by chengl）

Author: Yuki-Zhao

src/openlayers/core/StyleUtils.js

@@ -14,6 +14,7 @@ import StrokeStyle from 'ol/style/Stroke';
 import Text from 'ol/style/Text';
 
 var padding = 8, doublePadding = padding * 2;
+const ZERO = 0.0000001;
 
 /**
  * @class ol.supermap.StyleUtils
@@ -599,7 +600,6 @@ export class StyleUtils {
     style = style || this.getDefaultStyle();
     let olStyle = new Style();
     let newImage, newFill, newStroke;
-    const ZERO = 0.0000001;
     let {
       fillColor,
       fillOpacity,
@@ -1152,26 +1152,96 @@ export class StyleUtils {
    * @returns {Object} style对象
    */
   static getImageStyle(styleParams) {
-    let size = styleParams.imageInfo.size,
-      scale = 2 * styleParams.radius / size.w;
-    let imageInfo = styleParams.imageInfo;
-    let imgDom = imageInfo.img;
-    if (!imgDom || !imgDom.src) {
-      imgDom = new Image();
-      //要组装成完整的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: anchor || [0.5, 0.5],
-        anchorOrigin: 'bottom-right',
-        rotation
-      })
+      let size = styleParams.imageInfo.size,
+        scale = 2 * styleParams.radius / size.w;
+      let imageInfo = styleParams.imageInfo;
+      let imgDom = imageInfo.img;
+      if (!imgDom || !imgDom.src) {
+        imgDom = new Image();
+        //要组装成完整的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: anchor || [0.5, 0.5],
+          anchorOrigin: 'bottom-right',
+          rotation
+        })
+      });
+  }
+  /**
+   * @function ol.supermap.StyleUtils.getRoadPath 获取道路样式
+   * @param {object} style - 样式参数
+   * @param {object} outlineStyle - 轮廓样式参数
+   * @returns {Object} style对象
+   */
+  static getRoadPath(style, outlineStyle) {
+    const { strokeWidth=ZERO, lineCap, strokeColor, strokeOpacity } = style;
+    // 道路线都是solid
+    let strokeColorArray = this.hexToRgb(strokeColor);
+    strokeColorArray && strokeColorArray.push(strokeOpacity);
+    var stroke = new Style({
+        stroke: new StrokeStyle({
+            width: strokeWidth,
+            color: strokeColorArray,
+            lineCap: lineCap || 'round',
+            lineDash: [0]
+        })
+    });
+    
+    const { strokeColor: outlineColor } = outlineStyle;
+    let outlineColorArray = this.hexToRgb(outlineColor);
+    // opacity使用style的透明度。保持两根线透明度一致
+    outlineColorArray && outlineColorArray.push(strokeOpacity);
+    var outlineStroke = new Style({
+        stroke: new StrokeStyle({
+            width: strokeWidth + 2, //外部宽度=内部样式宽度 + 2
+            color: outlineColorArray,
+            lineCap: lineCap || 'round',
+            lineDash: [0]
+        })
+    });
+    return [outlineStroke, stroke];
+  }
+  /**
+   * @function ol.supermap.StyleUtils.getPathway 获取铁路样式
+   * @param {object} style - 样式参数
+   * @param {object} outlineStyle - 轮廓样式参数
+   * @returns {Object} style对象
+   */
+  static getPathway(style, outlineStyle) {
+      let { strokeWidth=ZERO, strokeColor, strokeOpacity } = style;
+      // 道路线都是solid, lineCap都是直角
+      const lineDash = (w => [w, w + strokeWidth * 2])(4 * strokeWidth), lineCap= 'square';
+      let strokeColorArray = this.hexToRgb(strokeColor);
+      strokeColorArray && strokeColorArray.push(strokeOpacity);
+      var stroke = new Style({
+          stroke: new StrokeStyle({
+              width: strokeWidth,
+              color: strokeColorArray,
+              lineCap,
+              lineDash
+          })
+      });
+    
+    const { strokeColor: outlineColor } = outlineStyle;
+    let outlineColorArray = this.hexToRgb(outlineColor);
+    // opacity使用style的透明度。保持两根线透明度一致
+    outlineColorArray && outlineColorArray.push(strokeOpacity);
+    var outlineStroke = new Style({
+        stroke: new StrokeStyle({
+            width: strokeWidth, 
+            color: outlineColorArray,
+            lineCap,
+            lineDash,
+            lineDashOffset: (lineDash[0] + lineDash[1]) / 2
+        })
     });
+    return [outlineStroke, stroke];
   }
 }

src/openlayers/mapping/WebMap.js

@@ -2497,9 +2497,17 @@ export class WebMap extends Observable {
      * @returns {ol/layer/Vector} 矢量图层
      */
     createVectorLayer(layerInfo, features) {
-        let style = StyleUtils.toOpenLayersStyle(layerInfo.style, layerInfo.featureType);
+        const {featureType, style} = layerInfo;
+        let newStyle;
+        if(featureType === 'LINE' && Util.isArray(style)) {
+            const [outlineStyle, strokeStyle] = style;
+            newStyle = strokeStyle.lineDash === 'solid' ? StyleUtils.getRoadPath(strokeStyle, outlineStyle) 
+            : StyleUtils.getPathway(strokeStyle, outlineStyle);
+        } else {
+            newStyle = StyleUtils.toOpenLayersStyle(layerInfo.style, layerInfo.featureType);
+        }
         return new olLayer.Vector({
-            style: style,
+            style: newStyle,
             source: new olSource.Vector({
                 features: layerInfo.filterCondition ? this.getFiterFeatures(layerInfo.filterCondition, features) : features,
                 wrapX: false