博客

作者：为梦齐舞

本文同步更新于简书文章https://www.jianshu.com/p/1609a02dc88f

据百度百科介绍：OpenStreetMap（简称OSM，中文是公开地图）是一个网上地图协作计划，目标是创造一个内容自由且能让所有人编辑的世界地图。

OSM是一款由网络大众共同打造的免费开源、可编辑的地图服务。OpenStreetMap它是利用公众集体的力量和无偿的贡献来改善地图相关的地理数据。OSM是非营利性的，它将数据回馈给社区重新用于其它的产品与服务。而其他地图则是将大多数的地图数据出售给第三方；苹果、微软、签到服务Foursquare在内的多家知名公司相继弃用谷歌地图，转而拥抱OpenStreetMap。

SuperMap iClient3D for WebGL支持多种服务来源的高精度影像地图服务的加载和渲染，本文将一起来学习下使用OpenStreetMap。

一、认识createOpenStreetMapImageryProvider

根据UrlTemplateImageryProvider进行封装，遵循地图图块使用政策Tile Usage Policy



url：OpenStreetMap服务器URL，可以根据填写不同的url加载不同的地图风格。默认为https://a.tile.openstreetmap.org

fileExtension：请求瓦片的格式，默认为png

rectangle：定义数据显示的范围，可以设置为Rectangle，限制数据的显示范围

minimumLevel：最小的瓦片层级，一般more为0，从最小比例尺开始渲染

maximumLevel：最大的瓦片层级，一般为undefined无限制。

二、重要参数介绍

1、url：填写不同的url加载不同的地图风格



图1

https://a.tile.openstreetmap.org




图2

https://c.tile.thunderforest.com/cycle




图3

https://b.tile.thunderforest.com/transport




图4

https://tile-a.openstreetmap.fr/hot


目前找到这四种，其实OpenStreetMap地图也是有Token的，见上图2和图3，有两幅影像有水印

但是目前createOpenStreetMapImageryProvider中并未提供Token参数，大家可以根据UrlTemplateImageryProvider自己扩展url中添加上apikey即可

let url="https://b.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=申请的key值"
      let openStreetLayer = new Cesium.UrlTemplateImageryProvider({ url: url });
      viewer.imageryLayers.addImageryProvider(openStreetLayer);

图5 去掉水印

三、使用方法

let osm = Cesium.createOpenStreetMapImageryProvider({
        url: "https://tile-a.openstreetmap.fr/hot",
        fileExtension:"png"
      });
      viewer.imageryLayers.addImageryProvider(osm);

四、效果展示