javascript - 如何在 ngx-openlayers 中加载自定义 .pbf 文件
问题描述
我能够使用带有以下代码的ngx-openlayers加载地图
<aol-map [width]="'100%'" [height]="'100%'">
<aol-view [zoom]="zoom">
<aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
</aol-view>
<aol-layer-tile [opacity]="opacity">
<aol-source-osm></aol-source-osm>
</aol-layer-tile>
<aol-layer-vector [opacity]="opacity">
<aol-source-vector>
<aol-feature>
<aol-geometry-point>
<aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
</aol-geometry-point>
<aol-style>
<aol-style-circle [radius]="10">
<aol-style-stroke [color]="'black'" [width]="width"></aol-style-stroke>
<aol-style-fill [color]="'green'"></aol-style-fill>
</aol-style-circle>
</aol-style>
</aol-feature>
<aol-feature>
<aol-geometry-point>
<aol-coordinate [x]="5.1" [y]="45.1" [srid]="'EPSG:4326'"></aol-coordinate>
</aol-geometry-point>
<aol-style>
<aol-style-icon [src]="'assets/marker.png'" [anchor]="[0.5, 1]" [anchorXUnits]="'fraction'" [anchorYUnits]="'fraction'" [scale]="0.1"
[anchorOrigin]="'top-left'">
</aol-style-icon>
</aol-style>
</aol-feature>
</aol-source-vector>
</aol-layer-vector>
</aol-map>
我的问题是我想使用http://localhost:8090/tileserver.php#trails/ol3 URL上的 MapTile 服务器加载我在本地计算机上提供的自定义地图位置。现在来自上述服务器的 XYZ URL 是 ( http://localhost:8090/tileserver.php?/index.json?/trails/ {z}/{x}/{y}.pbf)
如何使用 ngx-openlayers 包加载此地图
我尝试使用它,但它不起作用
<aol-map [width]="'500px'" [height]="'300px'">
<aol-interaction-default></aol-interaction-default>
<aol-control-defaults></aol-control-defaults>
<aol-control-fullscreen></aol-control-fullscreen>
<aol-layer-tile>
<aol-source-osm></aol-source-osm>
<aol-source-xyz [url]="'http://localhost:8090/tileserver.php?/index.json?/trails/{z}/{x}/{y}.pbf'">
</aol-source-xyz>
</aol-layer-tile>
<aol-view [zoom]="12">
<aol-coordinate [x]="6.47" [y]="53.44" [srid]="'EPSG:4326'"></aol-coordinate>
</aol-view>
</aol-map>
解决方案
所以是的,我即将回答我自己的问题,因为它可能会在未来帮助某人。
基础知识
OSM (OpenStreetMap) 的地图有两大类
1.光栅格式:这是地图的光栅图像(PNG,JPEG,SVG ...)图块。这种格式可以压缩成.mbtiles 格式。您可以使用mbuilt之类的工具将内容提取到 tms、wsm 或 XYZ 文件夹结构中。这是一种简单快捷的选择。
- 矢量格式:这是一种矢量文件格式,其中可以包含多种文件类型,例如 .pbf。它也可以压缩成 .mbtiles 文件。我们需要一个平铺服务器来渲染矢量文件的内容。 平铺服务器 GL是一个平铺服务器,可同时提供矢量/光栅地图文件 (mbtiles)
解决离线托管问题后,我使用了默认的leaflet.js 包,一切正常,没有问题。
我使用OpenMaptiles地图文件使用 tileserver-gl 托管它们
推荐阅读
- java - 如何创建n个数字的递归平方和方法?
- php - PhpSpreadsheet 将单元格的背景颜色设置为白色
- php - laravel 迁移 SQLSTATE[HY000]:一般错误:1215 无法添加外键约束
- c++ - c ++ ecliipse free():函数末尾的无效指针
- java - 用对象除分数
- protractor - 无法在 Protractor 中配置 Log4js
- java - 整个arraylist在编辑后继续打印
- asp.net - ASP.NET MVC 自动生成整数
- android - 自定义首选项中的 Android 复选框未更新
- javascript - 在 Angular 中写入嵌套对象数组时出现问题