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

news2024/9/27 21:30:41

问题背景
我们自己一直使用的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，这样子你的静态瓦片就能被别人访问到了（模拟了放在服务器上访问的效果）。

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这篇文章也说了怎么样自定义离线地图颜色的，大家也可以参考下，我觉得是挺不错的，开阔自己的思路

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/375967.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ubuntu20.04安装nginx一系列问题

ubuntu20.04安装nginx一系列问题

当初做一个项目的时候给linux装nginx遇到了很多问题&#xff0c;当初边搞边记录&#xff0c;这两天翻看项目笔记的时候找出来了&#xff0c;就把这一部分分享出来给大家看看 ubuntu20.04 LTS 安装yum无法定位软件包 备份原来的软件源 sudo cp /etc/apt/sources.list /etc/ap…
阅读更多...
目前软搭建测试的行业现状和前景

目前软搭建测试的行业现状和前景

软件测试的发展前景和行业现状 1. 软件测试的工资情况 软件测试的方向&#xff1a;功能>>>接口>>>性能>>>自动化>>>测开>>>人生巅峰 功能测试:曾经互联网缺口和软件测试缺口非常大&#xff0c;因此功能测试越来越多。可是20…
阅读更多...
Linux-编写一个自己的命令

Linux-编写一个自己的命令

前言&#xff08;1&#xff09;在Linux中&#xff0c;我们对文件路径进行操作都需要输入命令。那么&#xff0c;有人可能就会有疑惑了&#xff0c;命令是什么东西&#xff1f;我们是否也可以创造出自己的命令呢&#xff1f;答案是可以的。命令本身其实就是可执行文件。但是与普…
阅读更多...
使用docker pull 跨系统架构拉取镜像

使用docker pull 跨系统架构拉取镜像

使用docker pull 跨系统架构拉取镜像使用docker pull 跨系统架构拉取镜像docker hub上找到相应的镜像在个人电脑中的执行拉取镜像命令&#xff1a;执行查看镜像命令&#xff1a;执行检查镜像命令&#xff1a;执行保存镜像命令&#xff1a;使用docker pull 跨系统架构拉取镜像 …
阅读更多...
【C语言编译器】03 Linux GCC 初探

【C语言编译器】03 Linux GCC 初探

一、准备工作 简单介绍&#xff0c;马上出 GCC 系列。本文非常浅显。 Linux系统常用来用作服务器&#xff0c;其中最常用的发行版是CentOS、Ubuntu、Debian等。 尽管很多C语言IDE都有Linux版本&#xff0c;比如VS、CLion的Linux版。但作为服务器的Linux通常没有GUI界面&…
阅读更多...
腾讯TIM实现即时通信 v3+ts实践

腾讯TIM实现即时通信 v3+ts实践

目录 初始化sdk 功能描述 初始化 准备 SDKAppID 调用初始化接口 监听事件 发送消息 创建消息 创建文本消息 登录登出 功能描述 登录 登出 销毁 登录设置 获取会话列表 功能描述 获取会话列表 获取全量的会话列表 历史消息 功能描述 拉取消息列表 分页拉取…
阅读更多...
自动驾驶自主避障概况

自动驾驶自主避障概况

文章目录前言1. 自主避障在自动驾驶系统架构中的位置2. 自主避障算法分类2.1 人工势场法&#xff08;APF&#xff09;2.1.1引力势场的构建2.1.2斥力势场的构建2.1.3人工势场法的改进2.2 TEB&#xff08;Timed-Eastic-Band, 定时弹性带&#xff09;2.3 栅格法2.4 向量场直方图(V…
阅读更多...
Linux 之 大数据定制篇-shell 编程

Linux 之 大数据定制篇-shell 编程

文章目录1 为什么要学习 Shell 编程2 Shell 是什么&#xff1f;3 Shell 脚本的执行方式3.1 脚本格式要求3.2 编写第一个 Shell 脚本3.3 脚本的常用执行方式4 Shell 的变量4.1 Shell 变量介绍4.2 shell 变量的定义4.3 shell 变量的定义5 设置环境变量5.1 基本语法5.2 快速入门6 …
阅读更多...
【AI绘画】秒级出图 快速生成大师级画作

【AI绘画】秒级出图 快速生成大师级画作

最近闲来无事&#xff0c;在网上体验了一下各种AI绘画工具。 根据输入的描述语快速生成自己想要的图片&#xff0c;听着还是很不错的&#xff01;想要啥图片就可以生成啥图片&#xff1f;于是&#xff0c;期待满满的搞起来了~ 可是真当体验了一下之后… 这生成的啥呢&#xf…
阅读更多...
广泛运用在工业、轨道交通、监狱的ip对讲终端

广泛运用在工业、轨道交通、监狱的ip对讲终端

ip网络对讲系统是不同于传统广播、调频寻址广播和数控广播的产品&#xff0c;它是基于IP数据网络&#xff0c;将音频信号经过数字编码以数据包形式按TCP\IP协议在局域网或广域网上传送&#xff0c;再由终端解码的纯数字化单向&#xff0c;双向及多向音频扩声系统。 本产品是新一…
阅读更多...
多表left join 慢sql问题

多表left join 慢sql问题

作为个人记录&#xff0c;后续再填坑a对p是1对多 ,p对llup 1对多SELECTa.id,p.id,t1.id FROMliv_series_product aINNER JOIN liv_product p ON p.id a.product_idLEFT JOIN ( SELECT llup.id, llup.product_id, llup.room_id FROM liv_live_user_product llup WHERE llup.ro…
阅读更多...
超声功率放大器原理（超声功率放大器的作用是什么）

超声功率放大器原理（超声功率放大器的作用是什么）

超声功率放大器是电子实验室中比较常见的测量仪器&#xff0c;虽然很多工程师频繁使用&#xff0c;但是对于超声功率放大器的了解却不够。下面就让安泰电子来为大家科普超声功率放大器原理和作用的内容。超声功率放大器是什么&#xff1a;超声功率放大器是一种用于提高超声波能…
阅读更多...
requests---（2）session简介与自动写博客

requests---（2）session简介与自动写博客

目录&#xff1a;导读 session简介 session登录 自动写博客 获取登录cookies 抓取写博客接口 requests自动写博客 写在最后 http协议是无状态的&#xff0c;也就是每个请求都是独立的。那么登录后的一系列动作&#xff0c;都需要用cookie来验证身份是否是登录状态&#…
阅读更多...
C++将派生类赋值给基类（向上转型）

C++将派生类赋值给基类（向上转型）

1.将派生类对象赋值给基类对象 #include <iostream> using namespace std;//基类 class A{ public:A(int a); public:void display(); public:int m_a; }; A::A(int a): m_a(a){ } void A::display(){cout<<"Class A: m_a"<<m_a<<endl; }//…
阅读更多...
一文解读电压放大器（电压放大器原理）

一文解读电压放大器（电压放大器原理）

关于电压放大器的科普知识&#xff0c;之前讲过很多&#xff0c;今天为大家汇总一篇文章来详细的讲解电压放大器&#xff0c;希望大家对于电压放大器能有更清晰的认识。电压放大器是什么&#xff1a;电压放大器是一种常用的电子器件&#xff0c;它的主要作用是把输入信号的振幅…
阅读更多...
计算机网络-- 分类、体系结构（day03）

计算机网络-- 分类、体系结构（day03）

计算机网络的分类 计算机网络的性能指标 速率 数据块&#xff08;文件&#xff09;的大小单位是以2^10(1024)为一个级别递增。 例如&#xff1a; 1MB大小的文件&#xff0c;在网速为1Mbps发送的时间需要多少 文件大小的M是2进制来表示的&#xff0c;网速的M为10进制来表示的 …
阅读更多...
zabbix4.0-自定义脚本钉钉告警

zabbix4.0-自定义脚本钉钉告警

目录 1、自定义一个钉钉群组 2、自定义脚本告警 3、创建媒体类型 4、为用户指定媒介类型 5、更改触发器表达式进行测试 1、自定义一个钉钉群组 群组里面添加一个自定义机器人 会有一个webhook地址&#xff0c;这个地址要记住 安全设置暂时选择自定义关键词&#xff0c;定义…
阅读更多...
第四阶段02-酷鲨商城项目Mybatis相关的配置

第四阶段02-酷鲨商城项目Mybatis相关的配置

14. 添加与Mybatis相关的配置 在每个项目中&#xff0c;当需要使用Mybatis实现数据库编程时&#xff0c;都需要添加2项一次性配置&#xff1a;配置Mapper接口所在的包&#xff08;package&#xff09;、配置XML文件在哪里。 关于配置Mapper接口所在的包&#xff0c;可以&…
阅读更多...
BPMN2.0是什么，BPMN能解决企业流程管理中哪些问题？

BPMN2.0是什么，BPMN能解决企业流程管理中哪些问题？

一、前言&#xff1a; 在任何行业和企业中&#xff0c;一定存在着各式各样的流程&#xff0c;请假流程、报销流程、入职流程、离职流程、出差流程、合同审批流程、出入库流程等等…… 无论是管理者、技术人员还是业务人员&#xff0c;每天肯定也在使用各种流程&#xff0c;但…
阅读更多...
《MySQL学习》 索引失效的三种特殊情况

《MySQL学习》 索引失效的三种特殊情况

一.条件字段使用函数 explain select * from bpm_proc_instance bpi where CREATED_AT > 2022-06-01 CREATED_AT 字段建立了索引&#xff0c;此时explain分析的结果表明能使用到索引 但如果我们对 CREATED_AT 字段使用函数 explain select * from bpm_proc_instance bpi w…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023