add custom tiling scheme

dvgis · Apr 14, 2024 · d215e1d · d215e1d
1 parent f096888
commit d215e1d
Show file tree

Hide file tree

Showing 13 changed files with 492 additions and 17 deletions.
diff --git a/docs/zh/api/overlay-vector.md b/docs/zh/api/overlay-vector.md
@@ -1113,15 +1113,15 @@ let ellipse = new DC.Ellipse(position, 20, 30)
 }
 ```
 
-## DC.Ellipsoid
+## DC.Sphere
 
 > 球体要素，继承于[Overlay](#overlay)
 
 ### example
 
 ```js
 let position = new DC.Position(120, 20)
-let ellipsoid = new DC.Ellipsoid(position, { x: 30, y: 30, z: 30 })
+let ellipsoid = new DC.Sphere(position, { x: 30, y: 30, z: 30 })
 ```
 
 ### creation
@@ -1133,7 +1133,7 @@ let ellipsoid = new DC.Ellipsoid(position, { x: 30, y: 30, z: 30 })
  - 参数
  - `{Position|Number|String|Object} position`：坐标
  - `{Object} radius`：半径，格式是：`{x: 30, y: 30, z: 30}`
- - 返回值 `ellipsoid`
+ - 返回值 `sphere`
 
 ### properties
 

diff --git a/docs/zh/api/tile.md b/docs/zh/api/tile.md
@@ -2,6 +2,105 @@
 
 构建地球表面的地形和图片，展现地球表面的真实状态
 
+
+## DC.CustomGeographicTilingScheme
+
+> 自定义地理平铺方案
+
+根据瓦片的比例尺`(degrees/px)`和切图原点重新计算瓦片行列号,最终会采用`EPSG:4326`的瓦片计算规则平铺瓦片`(可能会存在偏移)`
+
+### example
+
+```js
+ viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer({
+ tilingScheme: new DC.CustomGeographicTilingScheme(
+ {
+ origin: [-180,90],
+ resolutions: [
+ 0.703125,
+ 0.3515625,
+ 0.17578125,
+ 0.087890625
+ ],
+ }
+ ),
+}))
+
+```
+
+
+### creation
+
+- **_constructor(options)_**
+
+ 构造函数
+
+ - 参数
+ - `{Object} options`：配置
+ - 返回值 `tilingScheme`
+
+```json
+// 属性参数 
+{
+ "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": DC.Ellipsoid.WGS84,// 平铺的椭球体,默认为 WGS84 椭球
+ "rectangle": DC.Rectangle.MAX_VALUE,//平铺方案覆盖的矩形（以弧度表示）
+}
+```
+
+## CustomMercatorTilingScheme
+
+> 自定义墨卡托平铺方案
+
+根据瓦片的比例尺`(meters/px)`和切图原点重新计算瓦片行列号,最终会采用`EPSG:3857`的瓦片计算规则平铺瓦片`(可能会存在偏移)`
+
+### example
+
+```js
+ viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer({
+ tilingScheme: new DC.CustomGeographicTilingScheme(
+ {
+ origin: [-20037508.3427892, 20037508.3427892],
+ resolutions: [
+ 156543.033928,
+ 78271.516964,
+ 39135.758482,
+ 19567.879241,
+ 9783.939621,
+ ],
+ }
+ ),
+}))
+
+```
+
+### creation
+
+- **_constructor(options)_**
+
+ 构造函数
+
+ - 参数
+ - `{Object} options`：配置
+ - 返回值 `tilingScheme`
+
+```json
+// 属性参数 
+{
+ "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": DC.Ellipsoid.WGS84,// 平铺的椭球体,默认为 WGS84 椭球
+ "rectangleSouthwestInMeters": null,//切片方案覆盖的矩形的西南角，以米为单位。如果不指定该参数或矩形NortheastInMeters，则在经度方向上覆盖整个地球，在纬度方向上覆盖等距离，形成正方形投影
+ "rectangleNortheastInMeters": null,//切片方案覆盖的矩形的东北角（以米为单位）。如果未指定此参数或矩形SouthwestInMeters，则在经度方向上覆盖整个地球，并在纬度方向上覆盖相等的距离，从而形成方形投影。
+}
+
+```
+
 ## DC.ImageryLayerFactory
 
 > 地图工厂, 用于创建各类地图瓦片

diff --git a/examples/info/crs_custom_geographic.html b/examples/info/crs_custom_geographic.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <title>dc-example</title>
+ <script src='/libs/dc-sdk/dc.min.js'></script>
+ <script src="../dat.gui.min.js"></script>
+ <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
+ <link href='../index.css' type='text/css' rel='stylesheet'>
+ <style>
+ .viewer-container{
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+ </style>
+</head>
+
+<body>
+<div id="viewer-container" class="viewer-container"></div>
+<script>
+
+ let viewer = undefined
+ function initViewer() {
+ viewer = new DC.Viewer('viewer-container')
+ viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer({
+ tilingScheme: new DC.CustomGeographicTilingScheme(
+ {
+ origin: [119.75, 32.25],
+ resolutions: [
+ 9.765664903423653e-4, 4.882832451711827e-4, 2.4414162258559134e-4,
+ 1.2207081129279567e-4, 6.103540564766688e-5, 3.0517702822564394e-5,
+ 1.5258851412551242e-5, 7.629425705006574e-6, 3.814712853772333e-6,
+ 1.90735154359766e-6,
+ ],
+ zoomOffset: -10,
+ }
+ ),
+ }))
+ viewer.flyToPosition('120,31,10000,0,-90,0')
+ viewer.on(DC.SceneEventType.MORPH_COMPLETE,e=>{
+ setTimeout(()=>{
+ viewer.flyToPosition('120,31,10000,0,-90,0')
+ })
+
+ })
+ addGuiController() // add controller
+ }
+
+ function addGuiController() {
+ let controls = {
+ sceneMode: 3,
+ }
+ let gui = new dat.GUI();
+ gui.add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 }).onChange(value => {
+ viewer.changeSceneMode(Number(value), 2)
+ })
+ }
+
+ DC.ready({
+ baseUrl:'../libs/dc-sdk/resources/'
+ }).then(initViewer)
+</script>
+</body>
+</html>
diff --git a/examples/info/crs_custom_mercator.html b/examples/info/crs_custom_mercator.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <title>dc-example</title>
+ <script src='/libs/dc-sdk/dc.min.js'></script>
+ <script src="../dat.gui.min.js"></script>
+ <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
+ <link href='../index.css' type='text/css' rel='stylesheet'>
+ <style>
+ .viewer-container{
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+ </style>
+</head>
+
+<body>
+<div id="viewer-container" class="viewer-container"></div>
+<script>
+
+ let viewer = undefined
+ function initViewer() {
+ viewer = new DC.Viewer('viewer-container')
+ viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer({
+ tilingScheme: new DC.CustomMercatorTilingScheme(
+ {
+ origin: [-5781523.99792, 4883853.592505],
+ resolutions: [
+ 132291.9312505292,
+ 66145.9656252646,
+ 26458.386250105836,
+ 19843.789687579378,
+ 13229.193125052918,
+ 6614.596562526459,
+ 2645.8386250105837,
+ 1322.9193125052918,
+ 661.4596562526459,
+ 264.5838625010584,
+ 132.2919312505292,
+ 66.1459656252646,
+ 26.458386250105836,
+ 19.843789687579378,
+ 13.229193125052918,
+ 6.614596562526459,
+ 2.6458386250105836,
+ 1.3229193125052918,
+ 0.6614596562526459
+ ],
+ }
+ ),
+ }))
+ viewer.flyToPosition('120,31,10000,0,-90,0')
+ viewer.on(DC.SceneEventType.MORPH_COMPLETE,e=>{
+ setTimeout(()=>{
+ viewer.flyToPosition('120,31,10000,0,-90,0')
+ })
+
+ })
+ addGuiController() // add controller
+ }
+
+ function addGuiController() {
+ let controls = {
+ sceneMode: 3,
+ }
+ let gui = new dat.GUI();
+ gui.add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 }).onChange(value => {
+ viewer.changeSceneMode(Number(value), 2)
+ })
+ }
+
+ DC.ready({
+ baseUrl:'../libs/dc-sdk/resources/'
+ }).then(initViewer)
+</script>
+</body>
+</html>
diff --git a/examples/info/crs_geographic.html b/examples/info/crs_geographic.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <title>dc-example</title>
+ <script src='/libs/dc-sdk/dc.min.js'></script>
+ <script src="../dat.gui.min.js"></script>
+ <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
+ <link href='../index.css' type='text/css' rel='stylesheet'>
+ <style>
+ .viewer-container{
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+ </style>
+</head>
+
+<body>
+<div id="viewer-container" class="viewer-container"></div>
+<script>
+ let viewer = undefined
+ function initViewer() {
+ viewer = new DC.Viewer('viewer-container')
+ viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer({
+ tilingScheme: new DC.WebMercatorTilingScheme(),
+ }
+ ))
+ addGuiController() // add controller
+ }
+
+ function addGuiController() {
+ let controls = {
+ sceneMode: 3,
+ }
+ let gui = new dat.GUI();
+ gui.add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 }).onChange(value => {
+ viewer.changeSceneMode(Number(value), 2)
+ })
+ }
+
+ DC.ready({
+ baseUrl:'../libs/dc-sdk/resources/'
+ }).then(initViewer)
+</script>
+</body>
+</html>
diff --git a/examples/info/coord.html → examples/info/crs_webMercator.html b/examples/info/coord.html → examples/info/crs_webMercator.html
@@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
+ <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
@@ -24,7 +25,23 @@
  let viewer = undefined
  function initViewer() {
  viewer = new DC.Viewer('viewer-container')
- viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer())
+ viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer({
+ tilingScheme: new DC.WebMercatorTilingScheme()
+ }))
+ addGuiController() // add controller
+ }
+
+
+ function addGuiController() {
+ let controls = {
+ sceneMode: 3,
+ }
+
+ let gui = new dat.GUI();
+
+ gui.add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 }).onChange(value => {
+ viewer.changeSceneMode(Number(value), 2)
+ })
  }
  DC.ready({
  baseUrl:'../libs/dc-sdk/resources/'