Openlayer系列之一

标签： 无 分类： 未分类 创建时间：2024-12-30 01:16:10 更新时间：2025-09-26 04:44:39

1.前言

很久没有写openlayer的东西了，从3.x开始，现在已经到了10.x，还在发展 。

2.权限认证

使用TMS服务 ，并且增加了权限认证，这里用的是”ol”: “^10.3.1”，vite直接驱动的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import './style.css';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js'
import TileWMS from 'ol/source/TileWMS.js';
import View from 'ol/View.js';
import XYZ from 'ol/source/XYZ.js';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
        source: new XYZ({
            url:"http://a.tile.osm.org/{z}/{x}/{y}.png"
          }),
     
    }),
    new TileLayer({
        source: new XYZ({
            tileLoadFunction: function(tile, src){
                console.log(src)
                // let src ="https://openmap.tech/dronecloudserver/drone/orthophoto/tiles/8508b43a778e436cb4f786d4706961e9/" + z + "/" + x + "/" + y + ".png";
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'blob';
                xhr.addEventListener('loadend', function (evt) {
                const data = this.response;
                if (data !== undefined) {
                    console.log(data)
                    tile.getImage().src = URL.createObjectURL(data);
                } else {
                    tile.setState(TileState.ERROR);
                }
                });
                xhr.addEventListener('error', function () {
                  tile.setState(TileState.ERROR);
                });
                xhr.open('GET', src);
                // xhr.setRequestHeader('authorization','eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzU1NjQ5NjEsInVzZXJuYW1lIjoiYWRtaW4ifQ.pxuOUOjHD4__HfD6KBZaJMpnefajUim-yA2X83YLhck');
                // xhr.setRequestHeader('x-access-token','eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzU1NjQ5NjEsInVzZXJuYW1lIjoiYWRtaW4ifQ.pxuOUOjHD4__HfD6KBZaJMpnefajUim-yA2X83YLhck');
                 xhr.setRequestHeader('authorization','eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzU1NzIzMjAsInVzZXJuYW1lIjoiYWRtaW4ifQ.ZjEfILBREJ7PNIK41GXWhH8giIWNbU1m46_suxYCRNg');
                xhr.setRequestHeader('x-access-token','eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzU1NzIzMjAsInVzZXJuYW1lIjoiYWRtaW4ifQ.ZjEfILBREJ7PNIK41GXWhH8giIWNbU1m46_suxYCRNg');
                xhr.send();
            },
            tileUrlFunction: function (tileCoord) {
                let z = tileCoord[0];
                let x = tileCoord[1];
                let y = Math.pow(2, z) - tileCoord[2] - 1;    
                // return "http://localhost:9099/hjkj/drone/orthophoto/tiles/3ce1ef3ad81c45c7a3e3bfc9c6f96ac5/" + z + "/" + x + "/" + y;
                return "https://openmap.tech/dronecloudserver/drone/orthophoto/tiles/8508b43a778e436cb4f786d4706961e9/" + z + "/" + x + "/" + y;
                // return "http://localhost:5173/" + z + "/" + x + "/" + y + ".png";
            }
          }),
    }),

  ],
  view: new View({
    projection: 'EPSG:4326',
    center: [120.143937453271,30.12599771681532],
    zoom: 18,
  }),
});

参考文章:
【1】.openlayers加载tms切片图层 也就是需要对y的值进行重新计算，以上两种方式确实可以加载出来，但是不知道是不是我ol的版本问题，加载出来的地图始终跟我的底图偏移了（相同坐标系情况下），可能是我ol版本比较低，另外一种加载方式解决了本人的问题，加载方式如下
【2】.GeoServer-权限认证-OpenLayers加载 用了 tileLoadFunctin 方法。
【3】.Openlayers加载水晶注标准TMS瓦片 这里提供了方法。
【4】.gdal2tiles.py gdal2tiles是标准的TMS服务切片
【5】.OpenLayers教程十二：多源数据加载之使用XYZ的方式加载瓦片地图 这里是加载xyz切片的例子
【6】.openlayers 使用WMTS和XYZ加载天地图切片服务 加载了天地图
【7】.Quick Start 官方的文档

**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.前言
  2. 2. 2.权限认证
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件（ititchuan@gmail.com）通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
ititchuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文