ol问题总结二

一、加载坐标系是4326格式的，使用wfsServer发布的服务，图层加载失败；坐标系是3857格式的。图层加载正常

原因：4326格式的，发布出来的，经纬度是颠倒的

解决方案一：将经纬度进行反转

<template>
  <div class="hello">
    <div id="mapId" class="mapContainerClass"></div>
  </div>
</template>

<script>
import axios from 'axios'
import OlMap from 'ol/Map'
import View from 'ol/View'
import { defaults as defaultControls} from 'ol/control'
import { get as getProj } from 'ol/proj'
import { getWidth, getTopLeft } from 'ol/extent'
import GML2 from 'ol/format/GML2'

import { Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import { WMTS, Vector as VectorSource } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { Fill, Style, Stroke,Circle } from 'ol/style'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      tiandituKey: '',
      map: null,
      fillUrl:'',
      GML2Layer: null,
    }
  },
  mounted() {
    this.initMap()
    this.map.on(
      'moveend',
      debounce((evt) => {
        this.mapMoveEnd(evt)
      }, 600),
      this
    )
  },
  methods: {
    initMap() {
      
      this.map = new OlMap({
        target: 'mapId', //地图容器div的ID
        view: new View({
          projection: 'EPSG:4326', // 投影方式
          center: [116.70392481556995, 36.37675167502263], //地图初始中心点
          extent: [-180, -90, 180, 90],
          // center: [12991421.48404573, 4352586.42500966],
          // extent: [-20037508.342789244, -238107693.26496765, 20037508.342789244, 238107693.26496765],
          zoom: 4.5, //地图初始显示级数
          minZoom: 1, //最大瓦片显示级数
          maxZoom: 18 //最小瓦片显示级数
        }),
        controls: defaultControls({
          // 默认控件
          zoom: false,
          rotate: false
        })
      })

      let baseMapLayer = new TileLayer({
        zIndex:0,
        source: this.getSource({
          title: '矢量', // 底图title
          source: 'TDTTile',
          visible: true,
          crossOrigin: 'anonymous',
          projection: 'EPSG:4326',
          url: `http://t0.tianditu.com/vec_c/wmts`,
          zIndex: 0
        })
      })
      let baseMapLayer2 = new TileLayer({
        zIndex:0,
        source: this.getSource({
          title: '矢量注记',
          source: 'TDTTile',
          visible: true,
          crossOrigin: 'anonymous',
          projection: 'EPSG:4326',
          url: `http://t0.tianditu.com/cva_c/wmts`,
          zIndex: 1,
          type: 'text' // type: 注记图层标识
        })
      })
      this.map.addLayer(baseMapLayer)
      this.map.addLayer(baseMapLayer2)

      this.GML2Layer = new VectorLayer({
          style: new Style({
            stroke: new Stroke({
              color: '#2697FF',
              width: 0,
              lineDash: [0]
            }),
            fill: new Fill({
              color: 'rgba(38,151,255,0.3)'
            }),
            image: new Circle({
              radius: 4,
              offset: [0, 0],
              fill: new Fill({
                color: 'red'
              }),
              stroke: new Stroke({
                color: 'gray',
                width: 0
              }),
              rotation:  0
          })
        }),
        // source: new VectorSource({
        //   projection: 'EPSG: 4326',
        //   url: this.pointUrl + 'EPSG:4326',
        //   format: new GML2(),
        // })
      })
      
      // this.map.addLayer(this.GML2Layer)
      this.initGML2Data()
     },
     mapMoveEnd() {
      this.initGML2Data()
     },
    initGML2Data() {
      let extent = this.map.getView().calculateExtent()
      let bbox = extent[1] + ',' + extent[0] + ',' + extent[3] + ',' + extent[2]
      this.fillUrl = 'http://xxx/arcMapServer/WFSServer?request=GetFeature&service=WFS&version=1.1.0&typename=&propertyName=&outputFormat=gml2&srsname=EPSG:4326&bbox=' + bbox + ',EPSG:4326where'
      axios.get(`${this.fillUrl}`).then(res=>{
        console.log('res:===',res)
        let features = new GML2().readFeatures(res.data, {
          featureProjection: this.map.getView().getProjection(),
          dataProjection: this.map.getView().getProjection(),
        })
        if(features.length) {
          features.forEach(feature => {
            for (var i=0; i<feature.values_.Shape.flatCoordinates.length; i=i+3) {
              var a = feature.values_.Shape.flatCoordinates[i]
              feature.values_.Shape.flatCoordinates[i] = feature.values_.Shape.flatCoordinates[i+1]
              feature.values_.Shape.flatCoordinates[i+1]=a
            }
          })
          GML2Source = new VectorSource({
            features
          })
          this.GML2Layer.setSource(GML2Source)
          this.map.addLayer(GML2Layer)
        }
      })
    },
    getSource(options={}) {
      let Source = null
      if(options.source === 'TDTTile') {
        const projection = getProj(options.projection) // url地址中有vec_c 时使用4326经纬度投影;有vec_w时使用球面墨卡托投影
        const projectionExtent = projection.getExtent()
        const size = getWidth(projectionExtent) / 256
        const resolutions = new Array(18)
        const matrixIds = new Array(18)
        for (let z = 1; z < 19; z++) {
          // generate resolutions and matrixIds arrays for this WMTS
          resolutions[z] = size / Math.pow(2, z)
          matrixIds[z] = options?.layer ? options.projection + ':' + z : z
        }
        const types = options.url.split('/')[3].split('_')

        let tiandituUrl = options.url + (options.url.indexOf('?') >= 0 ? '&tk=' : '?tk=') + this.tiandituKey
        // 在线天地图
        Source = new WMTS({
          ...options,
          crossOrigin: 'anonymous',
          // url: 'http://t0.tianditu.com/img_w/wmts', http://t0.tianditu.gov.cn/vec_c/wmts
          url: options.layer ? options.url : tiandituUrl,
          layer: options.layer || types[0], // 'img' || 'vec'|| ......
          matrixSet: options.matrixSet || types[1], // 'w' || 'c' || ......
          format: options.layer ? 'image/png' : 'tiles',
          style: '', // default
          projection: projection,
          tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds
          })
        })
      }
      return Source
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mapContainerClass {
  width: 100vw;
  height: 100vh;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

二、图片图层加载时，设置imageExtent的规则

将地图的zoom级别调整到合适的位置，通过以下获取当前的地图的extent,根据这个值进行对图片的imageExtent的设置

// 地图移动/zoom变化结束  evt
    mapMoveEnd() {
      if (this.map) {
        const curZoom = this.map.getView().getZoom()
        const extent = this.map.getView().calculateExtent()
        console.log('mapInfo.vue---地图移动/zoom变化结束', curZoom, extent)
      }
    },