Giter Club home page Giter Club logo

cesium-map's Introduction

cesium-map

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

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

安装

NPM / YARN

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

CDN

<script src="https://cdn.jsdelivr.net/npm/@dvgis/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:经典
}
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),
  })
))

示例

http://dc.dvgis.cn

cesium-map's People

Contributors

cavencj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cesium-map's Issues

import {AmapImageryProvider} 报错

Can't import the named export 'AmapImageryProvider' (imported as 'AmapImageryProvider') from default-exporting module (only default export is available)

求大佬,按照官网示例,报上边的错误是什么原因?

import { AmapImageryProvider } from '@dvgis/cesium-map'

相关版本号
"react": "^18.2.0"
"@dvgis/cesium-map": "^3.1.0"

地图太老

同时使用cesium-map的百度地图底图和百度地图的路径规划接口,在北京市图层重合,在合肥市不重合,推测为底图数据太老旧

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.