网站应用程序池,北京网站开发怎么样,电子商务网站建设与维护读书报告,整形网站开发一、加载坐标系是4326格式的#xff0c;使用wfsServer发布的服务#xff0c;图层加载失败#xff1b;坐标系是3857格式的。图层加载正常
原因#xff1a;4326格式的#xff0c;发布出来的#xff0c;经纬度是颠倒的
解决方案一#xff1a;将经纬度进行反转 templa…一、加载坐标系是4326格式的使用wfsServer发布的服务图层加载失败坐标系是3857格式的。图层加载正常
原因4326格式的发布出来的经纬度是颠倒的
解决方案一将经纬度进行反转 templatediv classhellodiv idmapId classmapContainerClass/div/div
/templatescript
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/GML2import { 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/styleexport 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?requestGetFeatureserviceWFSversion1.1.0typenamepropertyNameoutputFormatgml2srsnameEPSG:4326bbox bbox ,EPSG:4326whereaxios.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 i0; ifeature.values_.Shape.flatCoordinates.length; ii3) {var a feature.values_.Shape.flatCoordinates[i]feature.values_.Shape.flatCoordinates[i] feature.values_.Shape.flatCoordinates[i1]feature.values_.Shape.flatCoordinates[i1]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)}},
