我可以使用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 packkage加载此地图
我试图使用它,但是它不起作用
<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文件。我们需要一个图块服务器来呈现矢量文件的内容。
Tile server GL是一个平铺服务器,可同时提供矢量/栅格地图文件(mbtiles)
解决了离线托管问题之后,我使用了默认的leaflet.js程序包来处理角度问题,一切正常,没有问题。
我使用OpenMaptiles映射文件通过tileserver-gl托管它们