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

add Google2DImageryLayer

master
cavencj 2 週之前
父節點
b5ec5704d3
當前提交
1506483f1e
共有 9 個文件被更改，包括 240 次插入 和 234 次删除
統一視圖 顯示文件統計
  1. 1
    1
      docs/zh/api/base.md
  2. 41
    42
      examples/vector/polyline_custom_endpoint.html
  3. 37
    47
      examples/vector/polyline_dash_arrow.html
  4. 52
    52
      examples/vector/polyline_image_trail.html
  5. 39
    39
      examples/vector/polyline_multi_arrow.html
  6. 1
    1
      package.json
  7. 52
    36
      src/modules/imagery/ImageryLayerFactory.js
  8. 6
    5
      src/modules/imagery/ImageryType.js
  9. 11
    11
      src/modules/material/shader/polyline/PolylineImageTrailMaterial.glsl

+ 1
- 1
docs/zh/api/base.md 查看文件



let position2 = DC.Position.fromArray([120, 22, 102]) let position2 = DC.Position.fromArray([120, 22, 102])


let position3 = DC.Position.fromObject({ lng: 120, lat: 22, height: 102 })
let position3 = DC.Position.fromObject({ lng: 120, lat: 22, alt: 102 })
``` ```


### creation ### creation

+ 41
- 42
examples/vector/polyline_custom_endpoint.html 查看文件

<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<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>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>
<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>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>


<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
DC.config.baseUrl = '../libs/dc-sdk/resources/'
let viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1,
})
<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
DC.config.baseUrl = '../libs/dc-sdk/resources/'
let viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84'
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1
})


let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)


let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
polyline.setStyle({
width: 20,
material: new DC.PolylineCustomEndpointMaterialProperty({
color: DC.Color.BLUE,
// outlineColor: DC.Color.GREEN,
startType: 2,
endType: 1,
outlineShow: true,
lineWidth: 50,
}),
clampToGround: true,
})
layer.addOverlay(polyline)
viewer.flyTo(layer)
</script>
</body>
let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
polyline.setStyle({
width: 20,
material: new DC.PolylineCustomEndpointMaterialProperty({
color: DC.Color.BLUE,
startType: 2,
endType: 1,
outlineShow: true,
lineWidth: 50
}),
clampToGround: true
})
layer.addOverlay(polyline)
viewer.flyTo(layer)
</script>
</body>
</html> </html>

+ 37
- 47
examples/vector/polyline_dash_arrow.html 查看文件

<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<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>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>
<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>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>


<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
DC.config.baseUrl = '../libs/dc-sdk/resources/'
let viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1,
})
<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
DC.config.baseUrl = '../libs/dc-sdk/resources/'
let viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84'
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1
})


let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)


let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
polyline.setStyle({
width: 20,
material: new DC.PolylineDashArrowMaterialProperty({
color: DC.Color.BLUE,
}),
clampToGround: true,
})
layer.addOverlay(polyline)

let polyline2 = new DC.Polyline('-60, 20; -110, 20; -110, -80')
polyline2.setStyle({
width: 20,
material: new DC.PolylineEmissionMaterialProperty({
color: DC.Color.BLUE,
}),
clampToGround: true,
})
layer.addOverlay(polyline2)
viewer.flyTo(layer)
</script>
</body>
let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
polyline.setStyle({
width: 20,
material: new DC.PolylineDashArrowMaterialProperty({
color: DC.Color.BLUE
}),
clampToGround: true
})
layer.addOverlay(polyline)
viewer.flyTo(layer)
</script>
</body>
</html> </html>

+ 52
- 52
examples/vector/polyline_image_trail.html 查看文件

<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<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>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>
<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>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>


<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
DC.config.baseUrl = '../libs/dc-sdk/resources/'
let viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1,
})
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
DC.config.baseUrl = '../libs/dc-sdk/resources/'
let viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84'
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1
})
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)


let polyline = new DC.Polyline('-75, 35; -100, 35;-100, 30;-75, 30')
polyline.setStyle({
width: 10,
material: new DC.PolylineImageTrailMaterialProperty({
color: new DC.Color(0, 1, 1),
speed: 20,
image: '../assets/icon/arrow.png',
repeat: { x: 40, y: 1 },
}),
clampToGround: true,
})
let polyline = new DC.Polyline('-75, 35; -100, 35;-100, 30;-75, 30')
polyline.setStyle({
width: 10,
material: new DC.PolylineImageTrailMaterialProperty({
color: new DC.Color(0, 1, 1),
speed: 20,
image: '../assets/icon/arrow.png',
repeat: { x: 40, y: 1 }
}),
clampToGround: true
})


let polyline1 = new DC.Polyline('-75, 25; -100, 25')
polyline1.setStyle({
width: 10,
arcType: 1,
material: new DC.PolylineImageTrailMaterialProperty({
color: DC.Color.GREEN,
speed: 20,
image: '../assets/icon/arrow_1.png',
repeat: { x: 40, y: 1 },
}),
clampToGround: true,
})
let polyline1 = new DC.Polyline('-75, 25; -100, 25')
polyline1.setStyle({
width: 10,
arcType: 1,
material: new DC.PolylineImageTrailMaterialProperty({
color: DC.Color.GREEN,
speed: 20,
image: '../assets/icon/arrow_1.png',
repeat: { x: 40, y: 1 }
}),
clampToGround: true
})


layer.addOverlay(polyline).addOverlay(polyline1)
viewer.flyTo(layer)
</script>
</body>
layer.addOverlay(polyline).addOverlay(polyline1)
viewer.flyTo(layer)
</script>
</body>
</html> </html>

+ 39
- 39
examples/vector/polyline_multi_arrow.html 查看文件

<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<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>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>
<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>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>


<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
DC.config.baseUrl = '../libs/dc-sdk/resources/'
let viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1,
})
<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
DC.config.baseUrl = '../libs/dc-sdk/resources/'
let viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84'
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1
})


let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)


let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
polyline.setStyle({
width: 20,
material: new DC.PolylineMultiArrowMaterialProperty({
color: DC.Color.WHITE,
repeatFactor: 100.0,
antiClockWise: true,
}),
clampToGround: true,
})
layer.addOverlay(polyline)
viewer.flyTo(layer)
</script>
</body>
let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
polyline.setStyle({
width: 20,
material: new DC.PolylineMultiArrowMaterialProperty({
color: DC.Color.WHITE,
repeatFactor: 10.0,
antiClockWise: true
}),
clampToGround: true
})
layer.addOverlay(polyline)
viewer.flyTo(layer)
</script>
</body>
</html> </html>

+ 1
- 1
package.json 查看文件

"dist" "dist"
], ],
"dependencies": { "dependencies": {
"cesium": "^1.133.1",
"cesium": "^1.134.1",
"supercluster": "^8.0.1" "supercluster": "^8.0.1"
} }
} }

+ 52
- 36
src/modules/imagery/ImageryLayerFactory.js 查看文件

} }


/** /**
*
* Create arcgis imagery layer * Create arcgis imagery layer
* @param options * @param options
* @returns {Promise<ArcGisMapServerImageryProvider>} * @returns {Promise<ArcGisMapServerImageryProvider>}
} }


/** /**
* Create single tile imagery layer
* Create TMS imagery layer
* @param options * @param options
* @returns {<SingleTileImageryProvider>}
* @returns {Promise<TileMapServiceImageryProvider>}
*/ */
static createSingleTileImageryLayer(options) {
return Cesium.SingleTileImageryProvider.fromUrl(options.url, options)
static createTMSImageryLayer(options) {
return Cesium.TileMapServiceImageryProvider.fromUrl(options.url, options)
} }


/** /**
* Create WMS imagery layer
* Create grid imagery layer
* @param options * @param options
* @returns {Promise<WebMapServiceImageryProvider>}
* @returns {Promise<GridImageryProvider>}
*/ */
static createWMSImageryLayer(options) {
return Promise.resolve(new Cesium.WebMapServiceImageryProvider(options))
static createGridImageryLayer(options) {
return Promise.resolve(new Cesium.GridImageryProvider(options))
} }


/** /**
* Create WMTS imagery layer
* Create google 2d imagery layer
* @param options * @param options
* @returns {Promise<WebMapTileServiceImageryProvider>}
* @returns {Promise<Google2DImageryProvider>}
*/ */
static createWMTSImageryLayer(options) {
return Promise.resolve(new Cesium.WebMapTileServiceImageryProvider(options))
static createGoogle2DImageryLayer(options) {
let provider = Cesium.Google2DImageryProvider
return options.assetId
? provider.fromIonAssetId(options)
: provider.fromUrl(options)
} }


/** /**
* Create xyz imagery layer
* Create mapbox imagery layer
* @param options * @param options
* @returns {Promise<UrlTemplateImageryProvider>}
* @returns {Promise<MapboxImageryProvider>}
*/ */
static createXYZImageryLayer(options) {
return Promise.resolve(new Cesium.UrlTemplateImageryProvider(options))
static createMapboxImageryLayer(options) {
return Promise.resolve(new Cesium.MapboxImageryProvider(options))
} }


/** /**
* Create coord imagery layer
* Create mapbox style imagery layer
* @param options * @param options
* @returns {Promise<TileCoordinatesImageryProvider>}
* @returns {Promise<MapboxStyleImageryProvider>}
*/ */
static createCoordImageryLayer(options) {
return Promise.resolve(new Cesium.TileCoordinatesImageryProvider(options))
static createMapboxStyleImageryLayer(options) {
return Promise.resolve(new Cesium.MapboxStyleImageryProvider(options))
} }


/** /**
* Create grid imagery layer
* Create single tile imagery layer
* @param options * @param options
* @returns {Promise<GridImageryProvider>}
* @returns {<SingleTileImageryProvider>}
*/ */
static createGridImageryLayer(options) {
return Promise.resolve(new Cesium.GridImageryProvider(options))
static createSingleTileImageryLayer(options) {
return Cesium.SingleTileImageryProvider.fromUrl(options.url, options)
} }


/** /**
* Create mapbox imagery layer
* Create coord imagery layer
* @param options * @param options
* @returns {Promise<MapboxImageryProvider>}
* @returns {Promise<TileCoordinatesImageryProvider>}
*/ */
static createMapboxImageryLayer(options) {
return Promise.resolve(new Cesium.MapboxImageryProvider(options))
static createCoordImageryLayer(options) {
return Promise.resolve(new Cesium.TileCoordinatesImageryProvider(options))
} }


/** /**
* Create mapbox style imagery layer
* Create xyz imagery layer
* @param options * @param options
* @returns {Promise<MapboxStyleImageryProvider>}
* @returns {Promise<UrlTemplateImageryProvider>}
*/ */
static createMapboxStyleImageryLayer(options) {
return Promise.resolve(new Cesium.MapboxStyleImageryProvider(options))
static createXYZImageryLayer(options) {
return Promise.resolve(new Cesium.UrlTemplateImageryProvider(options))
} }


/** /**
* Create TMS imagery layer
* Create WMS imagery layer
* @param options * @param options
* @returns {Promise<TileMapServiceImageryProvider>}
* @returns {Promise<WebMapServiceImageryProvider>}
*/ */
static createTMSImageryLayer(options) {
return Cesium.TileMapServiceImageryProvider.fromUrl(options.url, options)
static createWMSImageryLayer(options) {
return Promise.resolve(new Cesium.WebMapServiceImageryProvider(options))
}

/**
* Create WMTS imagery layer
* @param options
* @returns {Promise<WebMapTileServiceImageryProvider>}
*/
static createWMTSImageryLayer(options) {
return Promise.resolve(new Cesium.WebMapTileServiceImageryProvider(options))
} }


/** /**
case ImageryType.GRID: case ImageryType.GRID:
promise = this.createGridImageryLayer(options) promise = this.createGridImageryLayer(options)
break break
case ImageryType.GOOGLE_2D:
promise = this.createGoogle2DImageryLayer(options)
break
case ImageryType.MAPBOX: case ImageryType.MAPBOX:
promise = this.createMapboxImageryLayer(options) promise = this.createMapboxImageryLayer(options)
break break

+ 6
- 5
src/modules/imagery/ImageryType.js 查看文件

let ImageryType = { let ImageryType = {
ARCGIS: 'arcgis', ARCGIS: 'arcgis',
BING: 'bing', BING: 'bing',
OSM: 'osm',
SINGLE_TILE: 'single_tile',
WMS: 'wms',
WMTS: 'wmts',
XYZ: 'xyz',
COORD: 'coord', COORD: 'coord',
GRID: 'grid', GRID: 'grid',
GOOGLE_2D: 'google_2d',
OSM: 'osm',
MAPBOX: 'mapbox', MAPBOX: 'mapbox',
MAPBOX_STYLE: 'mapbox_style', MAPBOX_STYLE: 'mapbox_style',
SINGLE_TILE: 'single_tile',
TMS: 'tms', TMS: 'tms',
WMS: 'wms',
WMTS: 'wmts',
XYZ: 'xyz',
} }


export default ImageryType export default ImageryType

+ 11
- 11
src/modules/material/shader/polyline/PolylineImageTrailMaterial.glsl 查看文件

uniform vec2 repeat; uniform vec2 repeat;


czm_material czm_getMaterial(czm_materialInput materialInput){ czm_material czm_getMaterial(czm_materialInput materialInput){
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = repeat * materialInput.st;
float time = fract(czm_frameNumber * speed / 1000.0);
vec4 colorImage = texture(image, vec2(fract(st.s - time), st.t));
if(color.a == 0.0){
if(colorImage.rgb == vec3(1.0) || colorImage.rgb == vec3(0.0)){
discard;
}
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = repeat * materialInput.st;
float time = fract(czm_frameNumber * speed / 1000.0);
vec4 colorImage = texture(image, vec2(fract(st.s - time), st.t));
if (color.a == 0.0){
if (colorImage.rgb == vec3(1.0) || colorImage.rgb == vec3(0.0)){
discard;
}
material.alpha = colorImage.a; material.alpha = colorImage.a;
material.diffuse = colorImage.rgb; material.diffuse = colorImage.rgb;
}else{
} else {
material.alpha = colorImage.a * color.a; material.alpha = colorImage.a * color.a;
material.diffuse = max(color.rgb * material.alpha * 3.0, color.rgb); material.diffuse = max(color.rgb * material.alpha * 3.0, color.rgb);
}
return material;
}
return material;
} }

Write Preview
Loading…
取消
儲存