位置: IT常识 - 正文

openlayers加载离线地图并实现深色地图(openlayers加载geojson)

编辑:rootadmin
openlayers加载离线地图并实现深色地图

推荐整理分享openlayers加载离线地图并实现深色地图(openlayers加载geojson),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:openlayers加载离线地图错位,openlayers加载shp,openlayers加载离线地图错位,openlayers加载离线地图,openlayers加载离线地图错位,openlayers加载离线天地图,openlayers加载离线瓦片地图,openlayers加载离线天地图,内容如对您有帮助,希望把文章链接给更多的朋友!

问题背景       我们自己一直使用的openlayer+geoserver自己发布的地图,使用的是矢量地图。但是由于政府地图大都使用为天地图,所以需要将geoserver的矢量地图更改为天地图,并且依旧是搭配openlayers来使用。 解决步骤 一:加载离线地图(参考了https://juejin.cn/post/7017301189406490655的文章)       ● 获取离线地图瓦片       ● openlayers加载离线地图瓦片       ● 显示地理坐标       ● 显示地理坐标范围。 二:颜色切换效果(参考https://www.cnblogs.com/m7777/p/16280817.html这篇文章)       ● openlayers瓦片预处理       ● 出现的各种问题修复 这里的解决方案我也是查了很多的博客和技术文章看的,但是其中的出现的问题真的很多很多啊。所以自己写一篇,记录一下。

一:加载离线地图

a.下载离线地图瓦片       首先需要做的是下载瓦片。       ● 下载离线地图瓦片,网上有很多方法、大部分收费 找个合适的工具真的难,找到一个能用的免费贡献出来了全能地图下载器       ● 链接:https://pan.baidu.com/s/18LiUAh1-5CsVxzhX77ZReg 提取码:yd88

● 1.下载完成后打开这个

2.选择需要下载的离线地图的瓦片(注意啊,这里的地图只能选高德地图的瓦片,其他地图的瓦片要么没有,要么就对不上号,会导致加载图片失败。很坑,一开始我以为是我代码的问题,结果并不是。这里我是先尝试,所以先下一个高德地图的瓦片试试,后面再用其他工具下天地图的瓦片,把瓦片换成天地图的瓦片,一样的)

错误大概是这样子的,不要怀疑自己,那是因为下载的瓦片不对,或者下载的瓦片不全导致的。如果是完全没出来,那就是下载器的问题,如果是部分没出来,那就是没下全瓦片。

b.发布离线数据

      ● 地图离线瓦片肯定是要放在服务器上的,放在项目里有点过于庞大了。       ● 本地测试的话,本地起一个服务用来访问地图离线瓦片,本文采用 http-server 猛击查看安装 一行命令。

步骤很简单,就是1.找到你下载地图离线瓦片的目录,然后npm i http-server。 2.然后再在那个目录上运行 http-server,这样子你的静态瓦片就能被别人访问到了(模拟了放在服务器上访问的效果)。

openlayers加载离线地图并实现深色地图(openlayers加载geojson)

c.openlayers 加载离线地图 本文以 vue2 项目为例 1.安装ol       ● npm install ol 2.加载离线的瓦片       这里的注意点就是 a.盒子必须要有宽高 b.url请换成你起http-server的服务地址 c.地图坐标中心点必须换成你下载城市的那个坐标范围。

<template> <div class="home"> <div style="width: 100%; height: 100%"> <div class="map" id="map"></div> </div> </div></template><script>import 'ol/ol.css'import Map from 'ol/Map'import { Tile as TileLayer } from 'ol/layer'import View from 'ol/View'import XYZ from 'ol/source/XYZ'export default { name: 'HomeView', components: {}, data () { return { mapObj: null, mapDom: null, mapPointList: [], pointLayerSource: null, pointLayer: null, } }, mounted () { this.initMap() }, methods: { // 清除地图 某些情况 地图容器会存在两个 导致地图无法正常显示 这个问题折腾了我半天。 // 找了半天官方貌似也没有提供 对应的 api,自己动手了。 mapClear () { if (this.mapDom) { this.mapDom.innerHTML = '' this.mapDom = null } }, // 初始化地图 initMap () { // 先尝试清除 // this.mapClear() // 获取地图容器 this.mapDom = document.getElementById('map') // 初始化地图配置 this.mapObj = new Map({ target: this.mapDom, // 地图容器 view: new View({ center: [112.475243, 23.077845], // 地图中心点 zoom: 13, // 缩放 projection: 'EPSG:4326', // 坐标系 }), }) // 添加一个使用离线瓦片地图的层 const offlineMapLayer = new TileLayer({ source: new XYZ({ url: 'http://169.254.231.19:8081' + '/{z}/{x}/{y}.png', // 设置本地离线瓦片所在路径,前面的地址是你输入http-server之后的服务地址 // tileLoadFunction: (imageTile, src)=> { // console.log(imageTile,src) // // 使用滤镜 将白色修改为深色 // let img = new Image() // // img.crossOrigin = '' // // 设置图片不从缓存取,从缓存取可能会出现跨域,导致加载失败 // img.setAttribute('crossOrigin', 'anonymous') // img.onload = ()=> { // let canvas = document.createElement('canvas') // let w = img.width // let h = img.height // canvas.width = w // canvas.height = h // let context = canvas.getContext('2d') // context.filter = 'grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)' // context.drawImage(img, 0, 0, w, h, 0, 0, w, h) // imageTile.getImage().src = canvas.toDataURL('image/png') // }, // img.onerror = ()=>{ // imageTile.getImage().src = require('@/assets/logo.png') // } // img.src = src // }, }), }) // 将图层添加到地图 this.mapObj.addLayer(offlineMapLayer) // 加载地理坐标 // this.addPoint() }, }, beforeDestroy () { this.mapClear() },}</script><style lang="less">.map { width: 1900px; height: 1000px; // background-color: red;}</style>

如果你进行到了这一步,恭喜你,你成功的利用openlayers加载了离线地图,在你运行项目之后,你应该能看到属于你的地图了

二:颜色切换效果

      思路参考:https://blog.csdn.net/qq_32077521/article/details/123224974(这边文章写的挺好的,大概讲了怎么样去更改自己地图的主题的几种办法。我之前用的是第二种使用filter来直接变色。结果导致了只要是地图上的东西,都会经过染色变成其他颜色,很不好!然后左思冥想,想到能不能只让该地图图层加上filter来变色,其他图层都不会有filter的变色效果,找了很久,找到了下面这个) 实现参考:https://www.cnblogs.com/m7777/p/16280817.html

a.openlayers瓦片预处理

利用openlayers中的tileLoadFunction 的函数回调进行变色,结合css的filter属性来进行变色。 大概就是这一段

tileLoadFunction函数解释:这个api大概就是让你在加载瓦片时进行操作。 css的filter属性解释:大概就是改变你图片的色相,饱和度,黑白,通透性等等,来实现图片变色的效果。(缺点,不能让地图指定哪个颜色,只能调个大概的好看的颜色。) 下面我放完整的代码,大家复制这个就行。因为上面参考的代码还有坑点

<template> <div class="home"> <div style="width: 100%; height: 100%"> <div class="map" id="map"></div> </div> </div></template><script>import 'ol/ol.css'import Map from 'ol/Map'import { Tile as TileLayer } from 'ol/layer'import View from 'ol/View'import XYZ from 'ol/source/XYZ'export default { name: 'HomeView', components: {}, data () { return { mapObj: null, mapDom: null, mapPointList: [], pointLayerSource: null, pointLayer: null, } }, mounted () { this.initMap() }, methods: { // 清除地图 某些情况 地图容器会存在两个 导致地图无法正常显示 这个问题折腾了我半天。 // 找了半天官方貌似也没有提供 对应的 api,自己动手了。 mapClear () { if (this.mapDom) { this.mapDom.innerHTML = '' this.mapDom = null } }, // 初始化地图 initMap () { // 先尝试清除 // this.mapClear() // 获取地图容器 this.mapDom = document.getElementById('map') // 初始化地图配置 this.mapObj = new Map({ target: this.mapDom, // 地图容器 view: new View({ center: [112.475243, 23.077845], // 地图中心点 zoom: 13, // 缩放 projection: 'EPSG:4326', // 坐标系 }), }) // 添加一个使用离线瓦片地图的层 const offlineMapLayer = new TileLayer({ source: new XYZ({ url: 'http://169.254.231.19:8081' + '/{z}/{x}/{y}.png', // 设置本地离线瓦片所在路径,前面的地址是你输入http-server之后的服务地址 tileLoadFunction: (imageTile, src)=> { console.log(imageTile,src) // 使用滤镜 将白色修改为深色 let img = new Image() // img.crossOrigin = '' // 设置图片不从缓存取,从缓存取可能会出现跨域,导致加载失败 img.setAttribute('crossOrigin', 'anonymous') img.onload = ()=> { let canvas = document.createElement('canvas') let w = img.width let h = img.height canvas.width = w canvas.height = h let context = canvas.getContext('2d') context.filter = 'grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)' context.drawImage(img, 0, 0, w, h, 0, 0, w, h) imageTile.getImage().src = canvas.toDataURL('image/png') }, img.onerror = ()=>{ imageTile.getImage().src = require('@/assets/logo.png') } img.src = src }, }), }) // 将图层添加到地图 this.mapObj.addLayer(offlineMapLayer) // 加载地理坐标 // this.addPoint() }, }, beforeDestroy () { this.mapClear() },}</script><style lang="less">.map { width: 1900px; height: 1000px; // background-color: red;}</style>

b.出现的各种问题解决

1.如果你复制了上面的代码,去运行。第一个发现的就是会跨域!!!!!那么说明了我们的静态资源文件有跨域的限制,虽然百度了说设置img.setAttribute(‘crossOrigin’, ‘anonymous’)这个有用,但是经过实验其实没用。 所以第一步:我们需要解决跨域的问题 **如何解决?**将刚才启动的http-server命令,换成http-server --cors(学过node应该了解一点,加上cors可以取消跨域),再次运行,你就会能运行上来了,注意看这个cors已经加上了

2.到这里我本以为已经是大功告成,但是,远远没有这么简单。原因就是出bug了。由于我们添加了这个函数,然后有些瓦片又不齐全,导致了加载了404的瓦片,再次缩放回来瓦片就没了!!!(这个我思考了很久才想到应该是这个问题导致的,大概的效果就是如下图)

解决办法:添加图片的onerror事件,把imageTile.getImage().src = require(‘@/assets/logo.png’)设置为一个图片出错时的替换图片就ok了。对于404的图片,大家也可以这样子设置,设置成需要替换的图片就行

总结       filter+openlayers的tileLoadFunction实现地图的变色,但是只能配出大概的整体好看的颜色。不能一一自定义某个图层的颜色,比如设置树的颜色,设置海滩的颜色。这些是需要自己发布地图服务来弄的。但是对于目前的离线地图需求的来说,实现业务需求已经可以了。毕竟我们自己搭的地图服务用的是Open Street Map ,可是业务觉得天地图是必须的,深色也是必须的,有利有弊,可以抉择。 另外https://blog.csdn.net/qq_32077521/article/details/123224974这篇文章也说了怎么样自定义离线地图颜色的,大家也可以参考下,我觉得是挺不错的,开阔自己的思路

demo地址:https://github.com/rui-rui-an/offlinemap,这个demo还需要配合瓦片的服务来,瓦片我就没上传了,太大,自己去下一个吧。我这个demo下载的是肇庆市的,大家可以下载肇庆的瓦片配合这个demo来看

本文链接地址:https://www.jiuchutong.com/zhishi/274546.html 转载请保留说明!

上一篇:王者荣耀中李白的出装是什么?(王者荣耀中李白第二次离开)

下一篇:Win7电脑中QQ音乐听不了怎么办?(电脑qq音乐设置在哪里)

  • ipadmini6电池多少毫安(ipadmini6电池参数)

    ipadmini6电池多少毫安(ipadmini6电池参数)

  • 华为手机测量尺在哪里(华为手机测量尺寸软件叫什么)

    华为手机测量尺在哪里(华为手机测量尺寸软件叫什么)

  • 无法在iphone上激活触控id怎么回事(无法在iphone上激活触控id的提示怎么办)

    无法在iphone上激活触控id怎么回事(无法在iphone上激活触控id的提示怎么办)

  • 笔记本0打出来是斜杠(笔记本0打出来是斜杠怎么转换)

    笔记本0打出来是斜杠(笔记本0打出来是斜杠怎么转换)

  • iphone用usb上网没反应(iphone用usb上网没反应怎么办)

    iphone用usb上网没反应(iphone用usb上网没反应怎么办)

  • 怎么看别人抖音的音浪多少(怎么看别人抖音点赞的人)

    怎么看别人抖音的音浪多少(怎么看别人抖音点赞的人)

  • 苹果11看抖音字幕显示不全(苹果11看抖音字体大小)

    苹果11看抖音字幕显示不全(苹果11看抖音字体大小)

  • 文字环绕方式在哪里(文字环绕方式在哪里找EXCEII)

    文字环绕方式在哪里(文字环绕方式在哪里找EXCEII)

  • 联想小新没有网线接口怎么办(联想小新没有网线接口)

    联想小新没有网线接口怎么办(联想小新没有网线接口)

  • 苹果11解开锁为啥卡顿一下(苹果11解了锁开不了屏幕)

    苹果11解开锁为啥卡顿一下(苹果11解了锁开不了屏幕)

  • 大数据4v是指哪四个(大数据的4v指的是什么)

    大数据4v是指哪四个(大数据的4v指的是什么)

  • 格式工厂ncm转mp3失败(格式工厂ncm转mp3在线转好还是用软件转好)

    格式工厂ncm转mp3失败(格式工厂ncm转mp3在线转好还是用软件转好)

  • 笔记本键盘解锁键是哪个键(华硕笔记本键盘解锁)

    笔记本键盘解锁键是哪个键(华硕笔记本键盘解锁)

  • 苹果耳机漏电是怎么回事(iphone12耳机漏电)

    苹果耳机漏电是怎么回事(iphone12耳机漏电)

  • 固态硬盘插主板哪个口(固态硬盘插主板为什么是斜的)

    固态硬盘插主板哪个口(固态硬盘插主板为什么是斜的)

  • 路由器里bloem是什么(路由器bloem是什么设备)

    路由器里bloem是什么(路由器bloem是什么设备)

  • airpods2能用多久(airpods2可以续航多久)

    airpods2能用多久(airpods2可以续航多久)

  • 苹果手机怎么调声音(苹果手机怎么调震动和静音)

    苹果手机怎么调声音(苹果手机怎么调震动和静音)

  • qq隐身会显示什么状态(qq隐身会显示什么状态图片)

    qq隐身会显示什么状态(qq隐身会显示什么状态图片)

  • ppt放映快捷键(ppt放映快捷键怎么设置)

    ppt放映快捷键(ppt放映快捷键怎么设置)

  • flash怎么加背景音乐(flash怎么加背景图片)

    flash怎么加背景音乐(flash怎么加背景图片)

  • 苹果手机自带测距仪在哪里(苹果手机自带测车速)

    苹果手机自带测距仪在哪里(苹果手机自带测车速)

  • 华为mate20支持双微信吗(华为mate20支持双频GPS吗)

    华为mate20支持双微信吗(华为mate20支持双频GPS吗)

  • 最贵的手机号码是什么(最贵的手机号码值多少钱)

    最贵的手机号码是什么(最贵的手机号码值多少钱)

  • uniapp 前端获取微信小程序 URL Link (HTTPS调用)(uniapp获取window对象)

    uniapp 前端获取微信小程序 URL Link (HTTPS调用)(uniapp获取window对象)

  • metareplace命令  启用或替换子镜像或RAID5元设备的组件(metric命令)

    metareplace命令 启用或替换子镜像或RAID5元设备的组件(metric命令)

  • 稽查局和税务局的关系
  • 多交增值税怎么算
  • 发票弄丢下一步怎么办
  • 应收账款融资的优缺点
  • 增值税专用发票和普通发票的区别
  • 预缴的企业所得税可以税前扣除吗
  • 增值税专票盖章正确位置
  • 滴滴客运服务费免税
  • 关于小规模纳税人
  • 建筑服务税率是5
  • 个人税收起征点调整
  • 走物流的货物如何收费
  • 三代税款手续费是什么意思
  • 代付给其他供应商货物尾款怎么记账
  • 经营租赁中出租人发生的初始直接费用是指
  • 个人以非货币性资产投资个人所得税
  • 购进商品没收到货怎么办
  • 免征增值税的会计处理方法有哪些
  • 怎么利用腾讯手机号找人
  • 电脑硬件检修
  • win10怎么改通知
  • 增值税减免是当月报下月冲吗
  • Laravel 5.5中为响应请求提供的可响应接口详解
  • 教育培训费能抵扣吗
  • 房地产无证销售法律风险
  • 公司为实习生买保险列支什么科目?
  • 权益法投资收益在年末确认
  • windows11更新多大
  • PHP:imagettfbbox()的用法_GD库图像处理函数
  • PHP:iconv_mime_decode_headers()的用法_iconv函数
  • 进口付汇流程
  • IIS 7.5 asp Session超时时间设置方法
  • 科目余额表平了但资产负债表不平
  • 杀疯了出自哪里
  • Laravel5权限管理方法详解
  • php如何post
  • 管理费用中的福利费有限额吗
  • 小规模纳税人收入是含税还是不含税
  • mysql事务引擎
  • sql server 2008使用说明
  • 深入浅出embedding pdf
  • 小规模纳税人申报增值税的操作流程
  • 无形资产属于货物吗为什么
  • 进项税转出金额怎么算
  • 外币报表折算差额可以转损益吗
  • 私车公用发票去哪个税务局开
  • 企业租车接送员工上下班
  • 公司对员工的罚款用途
  • 投资性房地产在资产负债表哪个科目
  • 应付票据转应付账款会计分录
  • 硕士研究生个税专项扣除
  • 关于投资收益纳税的说法
  • 发行股票手续费计入哪里
  • 小规模纳税人租赁不动产税率
  • 个人承担的个税会计分录
  • 联营企业子公司是否构成关联方
  • 高新企业研发项目规定几个
  • 税前税后利润弥补亏损的会计分录
  • 新会计准则2021执行科目
  • sql返回一条数据
  • mysql 5.7.11 zip安装配置方法图文教程
  • windowsxp电脑开机
  • centos docker安装部署
  • 苹果mac浏览器
  • winproxy.exe - winproxy是什么进程
  • Win7系统如何开启移动到文件夹选项
  • 华硕和联想笔记本电脑哪个好点
  • windows窗口查看快捷键
  • win7旗舰版磁盘清理
  • opengl帧缓冲
  • bootstrap需要学多久
  • Python内置函数的应用操作
  • 如何把多个文本文档合并成一个且分行不重叠
  • Python的flask框架教程
  • android 动画特效
  • Python中的def
  • 吉林省政府公开电话
  • 北京社保三方协议
  • 江苏地方税务局2013招考公告
  • 车船税单独交行吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设