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)}},
相关文章:
ol问题总结二
一、加载坐标系是4326格式的,使用wfsServer发布的服务,图层加载失败;坐标系是3857格式的。图层加载正常 原因:4326格式的,发布出来的,经纬度是颠倒的 解决方案一:将经纬度进行反转 <templa…...
批量打印-----jsPDF将图片转为pdf,并合并pdf
安装依赖并引入 import jsPDF from jspdf; import { PDFDocument, } from pdf-lib;注意一、 使用jspdf将图片(jpg/jpeg/png/bmp)转pdf(记为pdfA),得到的pdf(pdfA)和需要合并的pdf(记为pdfB)类…...
【Git】版本控制器详解之git的概念和基本使用
版本控制器git 初始Gitgit的安装git的基本使用初始化本地仓库配置本地仓库三区协作添加---add修改文件--status|diff版本回退--reset撤销修改删除文件 初始Git 为了能够更⽅便我们管理不同版本的⽂件,便有了版本控制器。所谓的版本控制器,就是⼀个可以记…...
C语言 棱形图案
目录 一、问题分析 上部分: 下部分: 二、代码演示 一、问题分析 如上图所示,我们可以将棱形进行拆解,分为上下两个部分。 上部分: 通过观察,我们得到 单边空格数 上半部分总行数 - 行数 - 1 …...
在idea使用GitHub账号、Copilot异常
登录GitHub显示这样的信息: Invalid authentication data.Connection refused: connect Failed to initiate the GitHub login process. Please try again. 修改hosts(C:\Windows\System32\drivers\etc\hosts),添加以下参数即可…...
面试热题(反转字符串中的单词)
给你一个字符串 s ,请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意:输入字符串 s中可能会存在前导空格、尾随空格…...
Stable Diffusion WebUI 从零基础到入门
本文主要介绍Stable Diffusion WebUI的实际操作方法,涵盖prompt推导、lora模型、vae模型和controlNet应用等内容,并给出了可操作的文生图、图生图实战示例。适合对Stable Diffusion感兴趣,但又对Stable Diffusion WebUI使用感到困惑的同学&am…...
【uniapp】一文读懂app端安装包升级
一、前言 首先,在app端开发上线的过程中,会面临一个问题,就是关于app端的版本升级的问题。如果不做相关处理来引导用户的话,那么app就会出现版本没有更新出现的各种问题,我们常见的有在线升级和去指定地址下载安装两种…...
【算法题】2518. 好分区的数目
题目: 给你一个正整数数组 nums 和一个整数 k 。 分区 的定义是:将数组划分成两个有序的 组 ,并满足每个元素 恰好 存在于 某一个 组中。如果分区中每个组的元素和都大于等于 k ,则认为分区是一个好分区。 返回 不同 的好分区的…...
编写守护进程
守护进程是一个后台进程,当操作系统启动时就可以运行的进程,当操作系统结束时结束的进程,与终端无关。 结果 不想要了就杀死...
stable-diffusion-webui启动No Python at ‘C:\xxx\xxx\python.exe‘
打开webui.bat 把 if not defined VENV_DIR (set "VENV_DIR%~dp0%venv") 中的%~dp0venv改成自己python的安装路径就行获取直接set值即可 如 set VENV_DIRD:\Users\xxx\AppData\Local\Programs\Python\Python310 另外就是直接运行webui-user.bat也可以 如果运行…...
面试热题(合并两个有序列表)
将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 合并链表这类型题也是比较经典的题了,因为链表是由指针相互指向而确定位置,所以我们只需要改变某些节点的指针便可以做到对链表进行排序 今天这个方法…...
QT生成Word PDF文档
需求:将软件处理的结果保存为一个报告文档,文档中包含表格、图片、文字,格式为word的.doc和.pdf。生成word是为了便于用户编辑。 开发环境:qt4.8.4vs2010 在qt的官网上对于pdf的操作介绍如下:http://qt-project.org/…...
阿里云服务器搭建WordPress建站教程基于Windows系统
本教程是使用阿里云服务器镜像系统选择的是Windows操作系统,手动安装WordPress博客网站全过程。本教程介绍如何在Windows操作系统的ECS实例上搭建WordPress网站。 目录 准备工作 搭建WordPress网站 解析WordPress网站域名 准备工作 创建Windows操作系统的ECS实…...
动态链接(8/11)
静态链接的缺点:生成的可执行文件体积较大,当多个程序引用相同的公共代码时,这些公共代码会多次加载到内存,浪费内存资源。 为了解决这个问题,动态链接对静态链接做了一些优化:对一些公用的代码࿰…...
Python 之 Http 获取网页的 html 数据,并去掉 html 格式等相关信息
Python之 Http 获取网页的 html 数据,并去掉 html 格式等相关信息 目录 Python之 Http 获取网页的 html 数据,并去掉 html 格式等相关信息...
干不完根本干不完,我也不想加班,快来围观时间管理大师
时间不够用,怎么办? 成功不靠加班。生产队的驴都不加班,你加什么班?到点就下班,该玩玩,该学习认真学,累了就睡觉。 你可以做任何事,但不必做所有事。 时间管理,不是管…...
常见设计模式
概念 设计模式是怎么解决问题的一种方案 常见的设计模式 单例模式 概念:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 应用:项目封装个websocket用于大屏,redux,vuex都应用了单例模式的思想;…...
Android之版本号、版本别名、API等级对应关系(全)(一百六十二)
简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…...
Redis的简介,安装(Linux、Windows),配置文件的修改---详细介绍
Redis基础 文章目录 Redis基础1、Redis入门1.1、Redis简介1.2、Redis下载与安装1.2.1、在Linux系统安装Redis1.2.2、在Windows系统安装Redis 1.3、Redis服务启动与停止1.3.1、在Linux中启动服务1.3.2、在Windows中启动服务1.3.3、设置密码校验1.3.4、redis的远程连接 Redis是一…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
《信号与系统》第 6 章 信号与系统的时域和频域特性
目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...
用递归算法解锁「子集」问题 —— LeetCode 78题解析
文章目录 一、题目介绍二、递归思路详解:从决策树开始理解三、解法一:二叉决策树 DFS四、解法二:组合式回溯写法(推荐)五、解法对比 递归算法是编程中一种非常强大且常见的思想,它能够优雅地解决很多复杂的…...
2025.6.9总结(利与弊)
凡事都有两面性。在大厂上班也不例外。今天找开发定位问题,从一个接口人不断溯源到另一个 接口人。有时候,不知道是谁的责任填。将工作内容分的很细,每个人负责其中的一小块。我清楚的意识到,自己就是个可以随时替换的螺丝钉&…...
CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx
“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网(IIoT)场景中,结合 DDS(Data Distribution Service) 和 Rx(Reactive Extensions) 技术,实现 …...
新版NANO下载烧录过程
一、序言 搭建 Jetson 系列产品烧录系统的环境需要在电脑主机上安装 Ubuntu 系统。此处使用 18.04 LTS。 二、环境搭建 1、安装库 $ sudo apt-get install qemu-user-static$ sudo apt-get install python 搭建环境的过程需要这个应用库来将某些 NVIDIA 软件组件安装到 Je…...
