OpenSource
/
dc-sdk
mirror of https://github.com/dvt3d/dc-sdk
Watch 4
Star 0
Fork 0
Code Issues 0 Releases 92 Wiki Activity
Browse Source

add Google2DImageryLayer

master
cavencj 2 weeks ago
parent
b5ec5704d3
commit
1506483f1e
9 changed files with 240 additions and 234 deletions
Split View Show Diff Stats
  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 View File

@@ -729,7 +729,7 @@ let position1 = DC.Position.fromString('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

+ 41
- 42
examples/vector/polyline_custom_endpoint.html View File

@@ -1,48 +1,47 @@
<!DOCTYPE html>
<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>

+ 37
- 47
examples/vector/polyline_dash_arrow.html View File

@@ -1,53 +1,43 @@
<!DOCTYPE html>
<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>

+ 52
- 52
examples/vector/polyline_image_trail.html View File

@@ -1,59 +1,59 @@
<!DOCTYPE html>
<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>

+ 39
- 39
examples/vector/polyline_multi_arrow.html View File

@@ -1,45 +1,45 @@
<!DOCTYPE html>
<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>

+ 1
- 1
package.json View File

@@ -64,7 +64,7 @@
"dist"
],
"dependencies": {
"cesium": "^1.133.1",
"cesium": "^1.134.1",
"supercluster": "^8.0.1"
}
}

+ 52
- 36
src/modules/imagery/ImageryLayerFactory.js View File

@@ -67,6 +67,7 @@ class ImageryLayerFactory {
}

/**
*
* Create arcgis imagery layer
* @param options
* @returns {Promise<ArcGisMapServerImageryProvider>}
@@ -94,84 +95,96 @@ class ImageryLayerFactory {
}

/**
* Create single tile imagery layer
* Create TMS imagery layer
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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))
}

/**
@@ -228,6 +241,9 @@ class ImageryLayerFactory {
case ImageryType.GRID:
promise = this.createGridImageryLayer(options)
break
case ImageryType.GOOGLE_2D:
promise = this.createGoogle2DImageryLayer(options)
break
case ImageryType.MAPBOX:
promise = this.createMapboxImageryLayer(options)
break

+ 6
- 5
src/modules/imagery/ImageryType.js View File

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

export default ImageryType

+ 11
- 11
src/modules/material/shader/polyline/PolylineImageTrailMaterial.glsl View File

@@ -4,19 +4,19 @@ uniform vec4 color;
uniform vec2 repeat;

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.diffuse = colorImage.rgb;
}else{
} else {
material.alpha = colorImage.a * color.a;
material.diffuse = max(color.rgb * material.alpha * 3.0, color.rgb);
}
return material;
}
return material;
}

Write Preview
Loading…
Cancel
Save