OpenSource
/
dc-sdk
镜像来自 https://github.com/dvt3d/dc-sdk
關注 4
收藏 0
複製 0
程式碼 問題 0 版本發佈 92 Wiki 活動
瀏覽代碼

add custom tiling scheme

tags/3.4.0
cavencj 1 年之前
父節點
f096888f7f
當前提交
d215e1dcac
共有 13 個檔案被更改，包括 492 行新增 和 17 行删除
分割檢視 顯示文件統計
  1. 3
    3
      docs/zh/api/overlay-vector.md
  2. 99
    0
      docs/zh/api/tile.md
  3. 68
    0
      examples/info/crs_custom_geographic.html
  4. 82
    0
      examples/info/crs_custom_mercator.html
  5. 50
    0
      examples/info/crs_geographic.html
  6. 18
    1
      examples/info/crs_webMercator.html
  7. 17
    5
      examples/list.js
  8. 5
    5
      examples/vector/sphere.html
  9. 1
    1
      examples/vector/sphere_trail.html
  10. 2
    0
      src/modules/imagery/index.js
  11. 63
    0
      src/modules/imagery/tiling-scheme/CustomGeographicTilingScheme.js
  12. 77
    0
      src/modules/imagery/tiling-scheme/CustomMercatorTilingScheme.js
  13. 7
    2
      src/modules/index.js

+ 3
- 3
docs/zh/api/overlay-vector.md 查看文件

@@ -1113,7 +1113,7 @@ let ellipse = new DC.Ellipse(position, 20, 30)
}
```

## DC.Ellipsoid
## DC.Sphere

> 球体要素，继承于[Overlay](#overlay)

@@ -1121,7 +1121,7 @@ let ellipse = new DC.Ellipse(position, 20, 30)

```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


+ 99
- 0
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

> 地图工厂, 用于创建各类地图瓦片

+ 68
- 0
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>

+ 82
- 0
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>

+ 50
- 0
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>

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/'

+ 17
- 5
examples/list.js 查看文件

@@ -8,11 +8,23 @@ const EXAMPLE_LIST = [
page: 'start.html',
},
{
name: '坐标参考',
page: 'coord.html',
name: '坐标参考-地理平铺',
page: 'crs_geographic.html',
},
{
name: '自定义Cesium',
name: '坐标参考-Web墨卡托平铺',
page: 'crs_webMercator.html',
},
{
name: '坐标参考-自定义地理平铺',
page: 'crs_custom_geographic.html',
},
{
name: '坐标参考-自定义墨卡托平铺',
page: 'crs_custom_mercator.html',
},
{
name: '自定义Cesium版本',
page: 'custom.html',
},
],
@@ -393,11 +405,11 @@ const EXAMPLE_LIST = [
},
{
name: '球',
page: 'ellipsoid.html',
page: 'sphere.html',
},
{
name: '轨迹球',
page: 'ellipsoid_trail.html',
page: 'sphere_trail.html',
},
{
name: '平面',

examples/vector/ellipsoid.html → examples/vector/sphere.html 查看文件

@@ -28,32 +28,32 @@
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)

let saturn= new DC.Ellipsoid('-95.0,45.0,300000.0',{x:200000.0, y:200000.0, z:200000.0}).setStyle({
let saturn= new DC.Sphere('-95.0,45.0,300000.0',{x:200000.0, y:200000.0, z:200000.0}).setStyle({
material: new DC.Color(0.95, 0.82, 0.49)
}).addTo(layer)

let innerRing = new DC.Ellipsoid('-95.0,45.0,300000.0,30,30',{x:400000.0, y:400000.0, z:400000.0}).setStyle({
let innerRing = new DC.Sphere('-95.0,45.0,300000.0,30,30',{x:400000.0, y:400000.0, z:400000.0}).setStyle({
innerRadii:{x:300000.0, y:300000.0, z:300000.0},
minimumCone:DC.Math.toRadians(89.8),
maximumCone: DC.Math.toRadians(90.2),
material: new DC.Color(0.95, 0.82, 0.49,0.5)
}).addTo(layer)

let outRing = new DC.Ellipsoid('-95.0,45.0,300000.0,30,30',{x:460000.0, y:460000.0, z:460000.0}).setStyle({
let outRing = new DC.Sphere('-95.0,45.0,300000.0,30,30',{x:460000.0, y:460000.0, z:460000.0}).setStyle({
innerRadii:{x:415000.0, y:415000.0, z:415000.0},
minimumCone:DC.Math.toRadians(89.8),
maximumCone: DC.Math.toRadians(90.2),
material: new DC.Color(0.95, 0.82, 0.49,0.5)
}).addTo(layer)

let blueEllipsoid = new DC.Ellipsoid('-120.0, 40.0,',{x:200000.0, y:200000.0, z:200000.0}).setStyle({
let blueEllipsoid = new DC.Sphere('-120.0, 40.0,',{x:200000.0, y:200000.0, z:200000.0}).setStyle({
maximumCone: DC.Math.PI_OVER_TWO,
material: DC.Color.BLUE.withAlpha(0.3),
outline: true,
}).addTo(layer)


let redEllipsoid = new DC.Ellipsoid('-108.0, 40.0',{x:250000.0, y:200000.0, z:150000.0}).setStyle({
let redEllipsoid = new DC.Sphere('-108.0, 40.0',{x:250000.0, y:200000.0, z:150000.0}).setStyle({
innerRadii:{x:100000.0, y:80000.0, z:60000.0},
maximumCone: DC.Math.PI_OVER_TWO,
material: DC.Color.RED.withAlpha(0.3),

examples/vector/ellipsoid_trail.html → examples/vector/sphere_trail.html 查看文件

@@ -27,7 +27,7 @@
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)

let ellipsoid = new DC.Ellipsoid('-108.0, 40.0',{x:200000.0, y:200000.0, z:200000.0}).setStyle({
let ellipsoid = new DC.Sphere('-108.0, 40.0',{x:200000.0, y:200000.0, z:200000.0}).setStyle({
maximumCone: DC.Math.PI_OVER_TWO,
material: new DC.EllipsoidTrailMaterialProperty({
color: DC.Color.fromCssColorString('#00ffff'),

+ 2
- 0
src/modules/imagery/index.js 查看文件

@@ -4,3 +4,5 @@

export { default as ImageryType } from './ImageryType'
export { default as ImageryLayerFactory } from './ImageryLayerFactory'
export { default as CustomGeographicTilingScheme } from '../imagery/tiling-scheme/CustomGeographicTilingScheme.js'
export { default as CustomMercatorTilingScheme } from '../imagery/tiling-scheme/CustomMercatorTilingScheme.js'

+ 63
- 0
src/modules/imagery/tiling-scheme/CustomGeographicTilingScheme.js 查看文件

@@ -0,0 +1,63 @@
/**
* @Author: Caven
* @Date: 2024-04-06 20:40:25
*/

import { Cesium } from '../../../namespace'

class CustomGeographicTilingScheme extends Cesium.GeographicTilingScheme {
constructor(options = {}) {
super(options)
this._origin = options.origin || [-180, 90]
this._zoomOffset = options.zoomOffset || 0
this._tileSize = options.tileSize || 256
this._resolutions = options.resolutions || []
}

get zoomOffset() {
return this._zoomOffset
}

tileXYToRectangle(x, y, level, result) {
if (!this._resolutions || !this._resolutions[level + this._zoomOffset]) {
return Cesium.Rectangle.MAX_VALUE
}

const tileRes = this._resolutions[level + this._zoomOffset] * this._tileSize
const west = Cesium.Math.toRadians(this._origin[0] + x * tileRes)
const south = Cesium.Math.toRadians(this._origin[1] - (y + 1) * tileRes)
const east = Cesium.Math.toRadians(this._origin[0] + (x + 1) * tileRes)
const north = Cesium.Math.toRadians(this._origin[1] - y * tileRes)
if (!result) {
return new Cesium.Rectangle(west, south, east, north)
}
result.west = west
result.south = south
result.east = east
result.north = north
return result
}

positionToTileXY(position, level, result) {
if (!this._resolutions || !this._resolutions[level + this._zoomOffset]) {
return new Cesium.Cartesian2()
}
const tileRes = this._resolutions[level + this._zoomOffset] * this._tileSize
const longitude = Cesium.Math.toDegrees(position.longitude)
const latitude = Cesium.Math.toDegrees(position.latitude)
// Calculate the tile row and column numbers in the current coordinate system
const xTileCoordinate = Math.floor((longitude - this._origin[0]) / tileRes)
const yTileCoordinate = Math.floor((this._origin[1] - latitude) / tileRes)
if (!result) {
return new Cesium.Cartesian2(
Math.max(0, xTileCoordinate),
Math.max(0, yTileCoordinate)
)
}
result.x = xTileCoordinate
result.y = yTileCoordinate
return result
}
}

export default CustomGeographicTilingScheme

+ 77
- 0
src/modules/imagery/tiling-scheme/CustomMercatorTilingScheme.js 查看文件

@@ -0,0 +1,77 @@
/**
* @Author: Caven
* @Date: 2024-04-06 20:40:25
*/

import { Cesium } from '../../../namespace'

class CustomMercatorTilingScheme extends Cesium.WebMercatorTilingScheme {
constructor(options = {}) {
super(options)
this._origin = options.origin || [-20037508.3427892, 20037508.3427892]
this._zoomOffset = options.zoomOffset || 0
this._tileSize = options.tileSize || 256
this._resolutions = options.resolutions || []
}

get zoomOffset() {
return this._zoomOffset
}

tileXYToNativeRectangle(x, y, level, result) {
if (!this._resolutions || !this._resolutions[level + this._zoomOffset]) {
return Cesium.Rectangle.MAX_VALUE
}

if (x < 0 || y < 0) {
return Cesium.Rectangle.MAX_VALUE
}
const tileRes = this._resolutions[level + this._zoomOffset] * this._tileSize
let west = this._origin[0] + x * tileRes
let south = this._origin[1] - (y + 1) * tileRes
let east = this._origin[0] + (x + 1) * tileRes
let north = this._origin[1] - y * tileRes

if (!result) {
return new Cesium.Rectangle(west, south, east, north)
}
result.west = west
result.south = south
result.east = east
result.north = north
return result
}

positionToTileXY(position, level, result) {
const rectangle = this._rectangle
if (!Cesium.Rectangle.contains(rectangle, position)) {
return undefined
}
if (!this._resolutions || !this._resolutions[level + this._zoomOffset]) {
return new Cesium.Cartesian2()
}
const tileRes = this._resolutions[level + this._zoomOffset] * this._tileSize
const projection = this._projection
const webMercatorPosition = projection.project(position)

// Calculate the tile row and column numbers in the current coordinate system
const xTileCoordinate = Math.floor(
(webMercatorPosition.x - this._origin[0]) / tileRes
)

const yTileCoordinate = Math.floor(
(this._origin[1] - webMercatorPosition.y) / tileRes
)
if (!result) {
return new Cesium.Cartesian2(
Math.max(0, xTileCoordinate),
Math.max(0, yTileCoordinate)
)
}
result.x = xTileCoordinate
result.y = yTileCoordinate
return result
}
}

export default CustomMercatorTilingScheme

+ 7
- 2
src/modules/index.js 查看文件

@@ -21,7 +21,12 @@ export { Transform, Transform as T, CoordTransform } from './transform'

export { default as Parse, default as P } from './parse/Parse'

export { ImageryType, ImageryLayerFactory } from './imagery'
export {
ImageryType,
ImageryLayerFactory,
CustomGeographicTilingScheme,
CustomMercatorTilingScheme,
} from './imagery'

export { TerrainType, TerrainFactory } from './terrain'

@@ -88,7 +93,7 @@ export {
Corridor,
Cylinder,
Ellipse,
Ellipsoid,
Sphere,
Label,
Plane,
Point,

Write Preview
Loading…
取消
儲存