Skip to content

CesiumChina/cesium-map

Repository files navigation

cesium-map

Cesium 地图插件,用���添加国内各大地图厂商的地图

 使用前引入 Cesium 框架,由于Cesium放弃了ImageryProvider部分属性,建议使用`viewer.imageryLayers.add`添加地图

安装

ESM

npm install @cesium-china/cesium-map
-----------------------------
yarn add @cesium-china/cesium-map
import { AMapImageryProvider,BaiduImageryProvider, GeoVisImageryProvider }  from '@cesium-china/cesium-map'

CDN

<script src="https://cdn.jsdelivr.net/npm/@cesium-china/cesium-map/dist/cesium.map.min.js"></script>

AMapImageryProvider

高德地图

var options = {
  style: 'img', // style: img、elec、cva
  crs: 'WGS84' // 使用84坐标系,默认为:GCJ02
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.AMapImageryProvider(options)))

BaiduImageryProvider

百度地图

var options = {
  style: 'normal', // style: img、vec、normal、dark
  crs: 'WGS84' // 使用84坐标系,默认为:BD09
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.BaiduImageryProvider(options)))

GeoVisImageryProvider

星图地图

var options = {
  style: 'vec', //style: img、vec、ter, cia,cat,
  key:'', // 需去相关地图厂商申请
  format:'png' //format:png、webp(用于style为img)
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.GeoVisImageryProvider(options)))

GoogleImageryProvider

谷歌地图

var options = {
  style: 'elec',//style: img、elec、ter,cva,img_cva
  crs: 'WGS84' // 使用84坐标系,默认为:GCJ02, img除外
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.GoogleImageryProvider(options)))

TdtImageryProvider

天地图

var options = {
  style: 'vec', //style: vec、cva、img、cia、ter 
  key:'', // 需去相关地图厂商申请
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.TdtImageryProvider(options)))

TencentImageryProvider

腾讯地图

var options = {
  style: 1,//style: img、1:经典
  crs: 'WGS84' // 使用84坐标系,默认为:GCJ02,
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.TencentImageryProvider(options)))

以下类用于自定义瓦片的加载,根据瓦片比例尺和切图原点重新计算瓦片行列号,可用于一些地方坐标系或者自定义切片方案的地图瓦片

CustomGeographicTilingScheme

自定义地理平铺方案

根据瓦片的比例尺(degrees/px)和切图原点重新计算瓦片行列号,最终会采用EPSG:4326的瓦片计算规则平铺瓦片(可能会存在偏移)

var options = {
  origin: [-180,90], //切图原点,默认为[-180,90]
  zoomOffset: 0, //瓦片的0级对应Cesium的瓦片层级,值为: 0 - Cesium层级,若瓦片的0级对应Cesium的10级,则值为 0 - 10 = -10,同时在瓦片请求时{z}的数值替换时也需加上这个层级偏移值
  tileSize: 256, //瓦片的大小,默认为256,即一张瓦片的大小为 256 * 256
  resolutions:[],//瓦片每一层级分辨率
  ellipsoid:Cesium.Ellipsoid.WGS84,// 平铺的椭球体,默认为 WGS84 椭球
  rectangle:Cesium.Rectangle.MAX_VALUE,//平铺方案覆盖的矩形(以弧度表示)
}
viewer.imageryLayers.add(new Cesium.ImageryLayer(
  new Cesium.TileCoordinatesImageryProvider({
    tilingScheme: new Cesium.CustomGeographicTilingScheme(options),
  })
))

CustomMercatorTilingScheme

自定义墨卡托平铺方案

根据瓦片的比例尺(meters/px)和切图原点重新计算瓦片行列号,最终会采用EPSG:3857的瓦片计算规则平铺瓦片(可能会存在偏移)

var options = {
  origin: [-20037508.3427892, 20037508.3427892], //切图原点,默认为[-20037508.3427892, 20037508.3427892]
  zoomOffset: 0, //瓦片的0级对应Cesium的瓦片层级,值为: 0 - Cesium层级,若瓦片的0级对应Cesium的10级,则值为 0 - 10 = -10,同时在瓦片请求时{z}的数值替换时也需加上这个层级偏移值
  tileSize: 256, //瓦片的大小,默认为256,即一张瓦片的大小为 256 * 256
  resolutions:[],//瓦片每一层级分辨率
  ellipsoid:Cesium.Ellipsoid.WGS84,// 平铺的椭球体,默认为 WGS84 椭球
  rectangleSouthwestInMeters: null,//切片方案覆盖的矩形的西南角,以米为单位。如果不指定该参数或矩形NortheastInMeters,则在经度方向上覆盖整个地球,在纬度方向上覆盖等距离,形成正方形投影
  rectangleNortheastInMeters: null,//切片方案覆盖的矩形的东北角(以米为单位)。如果未指定此参数或矩形SouthwestInMeters,则在经度方向上覆盖整个地球,并在纬度方向上覆盖相等的距离,从而形成方形投影。
}
viewer.imageryLayers.add(new Cesium.ImageryLayer(
  new Cesium.TileCoordinatesImageryProvider({
    tilingScheme: new Cesium.CustomMercatorTilingScheme(options),
  })
))

示例

examples目录下提供了CDN和ESM的两种使用方式