Method createGraticuleLayer

src/openlayers/mapping/WebMap.js:5458–5507

* @private * @function WebMap.prototype.createGraticuleLayer * @description 创建经纬网图层 * @param {Object} layerInfo - 图层信息 * @returns {ol.layer.Vector} 矢量图层

(layerInfo)

   * @returns {ol.layer.Vector} 矢量图层
   */
  createGraticuleLayer(layerInfo) {
    const { strokeColor, strokeWidth, lineDash, extent, visible, interval, lonLabelStyle, latLabelStyle } = layerInfo;
    const epsgCode = this.baseProjection;
    // 添加经纬网需要设置extent、worldExtent
    let projection = new olProj.get(epsgCode);
    projection.setExtent(extent);
    projection.setWorldExtent(olProj.transformExtent(extent, epsgCode, 'EPSG:4326'));

    let graticuleOptions = {
      layerID: 'graticule_layer',
      strokeStyle: new StrokeStyle({
        color: strokeColor,
        width: strokeWidth,
        lineDash
      }),
      extent,
      visible: visible,
      intervals: interval,
      showLabels: true,
      zIndex: 9999,
      wrapX: false,
      targetSize: 0
    };
    lonLabelStyle &&
      (graticuleOptions.lonLabelStyle = new Text({
        font: `${lonLabelStyle.fontSize} ${lonLabelStyle.fontFamily}`,
        textBaseline: lonLabelStyle.textBaseline,
        fill: new FillStyle({
          color: lonLabelStyle.fill
        }),
        stroke: new StrokeStyle({
          color: lonLabelStyle.outlineColor,
          width: lonLabelStyle.outlineWidth
        })
      }));
    latLabelStyle &&
      (graticuleOptions.latLabelStyle = new Text({
        font: `${latLabelStyle.fontSize} ${latLabelStyle.fontFamily}`,
        textBaseline: latLabelStyle.textBaseline,
        fill: new FillStyle({
          color: latLabelStyle.fill
        }),
        stroke: new StrokeStyle({
          color: latLabelStyle.outlineColor,
          width: latLabelStyle.outlineWidth
        })
      }));
    const layer = new olLayer.Graticule(graticuleOptions);
    this.map.addLayer(layer);
  }
  /**
   * @private
   * @function WebMap.prototype.getLang