Cesium 在线地图访问总结

本文汇总了多种在线地图资源,包括天地图、谷歌地图、BingMap等,详细介绍了如何使用不同平台的地图API,如cesium、leaflet、ol3等,以及获取地图瓦片的URL模板。涵盖街道图、卫星图、影像图等多种类型。

在线资源包括:天地图、谷歌地图、BingMap、OSM、Mapbox等

参考:https://deyihu.github.io/src/maptalks-tileLayercollection/examples/?tdsourcetag=s_pcqq_aiomsg

以下url中:

Z-瓦片层级,一般支持0-18级,越大代表越清晰;

X-瓦片列号,从西向东(0->360),依次0,1,2,……;

Y-瓦片行号,从北向南(有些也可能是从南向北),依次0,1,2,……;

cesium中通过UrlTemplateImageryProvider类访问:

1 new Cesium.UrlTemplateImageryProvider({
2     //调用影像服务 
3     url: "https://mt1.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}"
4 })

 其他访问方式:

复制代码

 1 //leaflet访问
 2 L.tileLayer('https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {
 3     maxZoom: 18,
 4     attribution: 'ArcGIS Map',
 5     id: 'arcgis.streets'
 6 }).addTo(map);
 7 
 8 //ol3
 9 new ol.layer.Tile({
10     source: new ol.source.XYZ({
11         url: 'https://mt2.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}'
12     })
13 })
14 
15 //openlayers2
16 new OpenLayers.Layer.XYZ(
17     "layername", 
18     ["https://mt1.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}",
19         "https://mt2.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}",
20         "https://mt3.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}"
21     ], {
22         attribution: "XYZ Imagery",
23         transitionEffect: "resize"
24     }
25 )

复制代码

 

不需要token的:

1、arcgis

街道图:

https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}

 

 

灰色图:

https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}

 

 

深蓝夜色:

https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}

 

 

2、googlemap

lys参数可选值包括:h(街道图)、m(街道图)、p(街道图)、r(街道图)、s(影像无注记)、y(影像含注记)、t(地形图)

街道图:

https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}

 

 

卫星图:

https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}(或者http://mt1.google.cn/vt/lyrs=s&x={x}&y={y}&z={z})

 

 

3、Amap(高德地图)

街道:(z>=3才有数据)

https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}

 

影像图:

https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

 

4、OSM

街道图(国外服务器,访问较慢):

https://c.tile.openstreetmap.org/{z}/{x}/{y}.png

 

https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png

 

5、Mapbox

建筑图:(国内数据略陈旧)

https://b.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png

 

黑色底图:

https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png

 

 

需要token

6、Mapbox

卫星图:

https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=

 

街道图:

https://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=

 

带区划黑底:

https://a.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=

 

7、天地图(http://lbs.tianditu.gov.cn/server/MapService.html)

影像图:(z>=1)

https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=

 

矢量底图:(z>=1)

https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=9a516b0f2a8179bb68f73172cff4bd22

 

注记:(z>=1)

https://t2.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&tk=

 

8、BingMap

 

 

https://ecn.t0.tiles.virtualearth.net/tiles/a1.jpeg?g=7234

https://ecn.t0.tiles.virtualearth.net/tiles/a13.jpeg?g=7234

https://ecn.t0.tiles.virtualearth.net/tiles/a130.jpeg?g=7234

从Level1开始,g=7234/100/-10……为任意正负整数

 

官网申请Key后,cesium中访问方式:

1 new Cesium.BingMapsImageryProvider({
2     url: 'https://dev.virtualearth.net',
3     key: bingmapToken,
4     mapStyle: Cesium.BingMapsStyle.AERIAL
5 })
<think>嗯,用户想在Vue项目中使用Cesium加载本地离线地图,数据源配置方法。首先,我需要回忆一下Cesium中加载离线地图的常见方式。Cesium通常使用WMTS、WMS或者XYZ格式的瓦片地图服务。如果是本地离线数据,可能需要将地图切片存储在本地,并通过正确的URL路径访问。 接下来,用户用的是Vue框架,所以可能需要使用vue-cesium这个库。根据之前用户提供的引用,引用[1]和引用[2]提到了加载高德地图和天地图的方法,但用户需要的是本地离线地图。所以需要调整数据源的配置,指向本地的瓦片文件。 第一步,用户需要准备好离线地图的瓦片数据。常见的工具比如Qgis或者maptiler可以生成切片,存储为文件夹结构,例如{z}/{x}/{y}.png。然后,在Vue项目中,这些切片应该放在public目录下,比如public/offline-map,这样在构建时这些文件会被正确复制到输出目录。 然后,在Cesium中加载这些本地瓦片,需要使用UrlTemplateImageryProvider,指定url模板。例如,url设置为`/offline-map/{z}/{x}/{y}.png`,注意这里的相对路径是否正确。可能需要调整切片方案,比如tilingScheme设置为WebMercatorTilingScheme,如果是墨卡托投影的话。 另外,用户可能需要处理跨域问题,虽然本地文件可能不会有这个问题,但如果通过服务器运行,可能需要配置CORS。但如果是本地文件直接访问,可能不需要。不过安全起见,建议用户通过本地服务器运行项目,比如使用Vue CLI的devServer,或者将项目部署到本地服务器如nginx,确保路径正确。 然后,代码部分需要引入Cesium的Viewer,并在初始化时添加imageryProvider。在vue-cesium中,可能需要在vc-viewer组件中添加imageryProvider的配置。比如,在mounted生命周期钩子中,创建Viewer实例,并添加imageryProvider指向本地路径。 还需要注意瓦片的坐标原点和范围是否正确,可能需要设置rectangle参数来限制地图显示的范围,避免加载多余的瓦片或者坐标错误导致的空白。 最后,用户可能需要测试不同的切片方案,比如地理坐标系WGS84或者Web墨卡托,确保生成的瓦片和Cesium的默认坐标系一致。否则,地图可能会显示错位或者无法加载。 总结步骤应该是:准备离线瓦片,配置正确的URL路径,使用UrlTemplateImageryProvider加载,处理可能的坐标系和跨域问题,并在Vue组件中正确初始化和添加图层。</think>在Vue中通过Cesium加载本地离线地图需遵循以下步骤: ### 一、数据准备 1. 将离线地图瓦片按`z/x/y`层级结构存放(如`public/offline-map/{z}/{x}/{y}.png`) 2. 推荐使用QGIS或GDAL工具生成兼容Cesium的瓦片格式[^1] ### 二、核心配置方法 ```vue <template> <vc-viewer @ready="onViewerReady"> <vc-layer-imagery :sortOrder="0"> <vc-provider-imagery-urltemplate :url="localMapUrl" :rectangle="[-180, -90, 180, 90]" :tilingScheme="webMercator" /> </vc-layer-imagery> </vc-viewer> </template> <script> import { WebMercatorTilingScheme } from 'cesium' export default { data() { return { localMapUrl: '/offline-map/{z}/{x}/{y}.png', webMercator: new WebMercatorTilingScheme() } }, methods: { onViewerReady({ Cesium, viewer }) { viewer.scene.globe.baseColor = Cesium.Color.BLACK // 设置无数据区域背景 } } } </script> ``` ### 三、关键配置说明 1. **tilingScheme**:需与瓦片生成方案一致(常用WebMercator) 2. **rectangle**:控制地图显示范围 3. **文件路径**:建议使用绝对路径`/offline-map/...`避免层级问题 ### 四、常见问题处理 1. **跨域问题**:在vue.config.js中添加代理配置 ```js module.exports = { devServer: { proxy: { '/offline-map': { target: 'http://localhost:8080', changeOrigin: true } } } } ``` 2. **瓦片偏移**:检查瓦片生成时的坐标系设置 3. **性能优化**:使用HTTP/2协议加载本地文件[^2]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值