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的IDview: 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: '矢量', // 底图titlesource: '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 = nullif(options.source === 'TDTTile') {const projection = getProj(options.projection) // url地址中有vec_c 时使用4326经纬度投影;有vec_w时使用球面墨卡托投影const projectionExtent = projection.getExtent()const size = getWidth(projectionExtent) / 256const resolutions = new Array(18)const matrixIds = new Array(18)for (let z = 1; z < 19; z++) {// generate resolutions and matrixIds arrays for this WMTSresolutions[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/wmtsurl: 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: '', // defaultprojection: 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变化结束  evtmapMoveEnd() {if (this.map) {const curZoom = this.map.getView().getZoom()const extent = this.map.getView().calculateExtent()console.log('mapInfo.vue---地图移动/zoom变化结束', curZoom, extent)}},