您现在的位置是:首页 > 正文

Openlayers中加载Geoserver切割的EPSG:900913离线瓦片图层组

2024-04-01 04:18:49阅读 1

场景

Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示:

Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面讲的是切割单个图层并显示离线瓦片地图,如果是一个图层组,包含多个图层的话要怎么加载显示。

比如这个图层组的预览中有三个图层,灰色线是一个图层,黑色线是一个图层,文字是一个图层。

这种多图层的图层组怎样切割瓦片并离线加载显示。

注:

博客:
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、依次将上面三个图层分别切割成同等层级的离线瓦片png照片。

如下依次放在三个目录下

2、声明三个地图图层对象

        new Vue({
            el: '#app',
            data() {
                return {
                    vectorLayer: null, // layer
                    map: null, // 地图
                    layers1: null, // 地图图层
                    layers2: null, // 地图图层
                    layers3: null, // 地图图层

3、在地图初始化执行的方法中依次对这三个图层进行不同url的初始化

                    let self = this
                    self.layers1 = new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            tileUrlFunction: function (xyz, obj1, obj2) {
                                if (!xyz) return ''
                                var z = xyz[0]
                                var x = Math.abs(xyz[1])
                                var y = Math.abs(xyz[2])
                                var xyz_convert = self.convert_(z, x, y)
                                x = xyz_convert[0]
                                y = xyz_convert[1]
                                z = xyz_convert[2]
                                var shift = z / 2
                                var half = 2 << shift
                                var digits = 1
                                if (half > 10)
                                    digits = parseInt(Math.log(half) / Math.log(10)) + 1
                                var 

网站文章

  • LeetCode 962. Maximum Width Ramp

    LeetCode 962. Maximum Width Ramp

    962. Maximum Width Ramp(最大宽度坡) 题目:   给定一个整数数组A,坡是元组(i, j),其中i < j且A[i] <= A[j]。这样的坡的宽度为j - i。   找出A中的坡的最大宽度,如果不存在,返回 0 。   示例 1:   输入:[6,0,8,2,1,5]   输出:4   解释:   最大宽度的...

    2024-04-01 04:18:07
  • Angular编译及变化检测相关详解

    Angular编译及变化检测相关详解

    一、编译1、为什么 Angular 需要编译Angular 是基于 TypeScript,编译打包的时候会用 tsc 将 TypeScript 编译成 es5 文件,这样在浏览器 JavaScript...

    2024-04-01 04:18:01
  • Check for degenerate boxes检查退化框

    判断boxes的二维后两个数是否小于二维前两个数,若存在,返回true(这里跟所解决的代码问题不一样,所要解决应该是返回box,不是true?enumerate()函数用于将一个可遍历的数据对象(如列...

    2024-04-01 04:17:54
  • Java实现LRU缓存

    Java实现LRU缓存

    原文地址:https://www.cnblogs.com/lzrabbit/p/3734850.htmlLRU缓存实现(Java) LRU Cache的LinkedHashMap实现LRU Cac...

    2024-04-01 04:17:09
  • 在Linux中进行Hbase搭建

    在Linux中进行Hbase搭建

    在公网IP为x.x.x.x、y.y.y.y和z.z.z.z并装有Centos8的服务器上进行hadoop集群搭建、zookeeper集群搭建和hbase搭建,都安装hadoop-3.1.3、server-jre-8u202-linux-x64、apache-zookeeper-3.6.4-bin和hbase-2.5.0-bin。

    2024-04-01 04:17:03
  • 网站出现 502 Bad Gateway 怎么解决?

    网站出现 502 Bad Gateway 怎么解决?

    为什么80%的码农都做不了架构师?&gt;&gt;&gt; ...

    2024-04-01 04:16:56
  • vb.net正则表达式html,VB.Net常用的正则表达式(实例)

    "^\d+$"  //非负整数(正整数 + 0)"^[0-9]*[1-9][0-9]*$"  //正整数"^((-\d+)|(0+))$"  //非正整数(负整数 + 0)"^-[0-9]*[1-9]...

    2024-04-01 04:16:16
  • Android进阶之路——Android Studio使用与5.0新特性

    Android进阶之路——Android Studio使用与5.0新特性

    Android Studio 特:一个工作空间只能有一个项目,其他的不能是项目只能是库 恢复窗体: 【View菜单】==&gt;【Tool Windows】选项中可恢复ide下侧选项卡 【左下角屏幕类似小图标】可恢复左侧选项卡 1.新建工作空间 注:由于新建过程过于雷同于eclipse新建项目,所以不在这里描述。工作空间内所有项目统一Android开发版本,在新建工作空间时会选择Androi

    2024-04-01 04:16:09
  • 简单的时钟html

    简单的时钟html

    简单的时钟

    2024-04-01 04:16:01
  • [解决方案]springboot怎么接受encode后的参数(参数通过&=拼接)

    [解决方案]springboot怎么接受encode后的参数(参数通过&=拼接)

    springboot怎么接受encode后的参数(参数通过&=拼接)

    2024-04-01 04:15:55