OpenSource
/
dc-sdk
espelhamento de https://github.com/dvt3d/dc-sdk
Observar 4
Favorito 0
Fork 0
Código Issues 0 Versões 92 Wiki Atividade
Ver código fonte

update examples

tags/3.0.0
Caven Chen 2 anos atrás
pai
2f97fd3c46
commit
2f1d2c8d5f
14 arquivos alterados com 633 adições e 0 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 13
    0
      examples/dat.gui.min.js
  2. 47
    0
      examples/widget/compass.html
  3. 48
    0
      examples/widget/contextmenu.html
  4. 46
    0
      examples/widget/distance_legend.html
  5. 49
    0
      examples/widget/hawkeye_map.html
  6. 47
    0
      examples/widget/loading_mask.html
  7. 48
    0
      examples/widget/locationbar.html
  8. 61
    0
      examples/widget/popup.html
  9. 78
    0
      examples/widget/scene_split.html
  10. 49
    0
      examples/widget/tooltip.html
  11. 48
    0
      examples/widget/zoom_controller.html
  12. 63
    0
      src/themes/loading-mask.scss
  13. 13
    0
      src/themes/popup.scss
  14. 23
    0
      src/themes/zoom-controller.scss

+ 13
- 0
examples/dat.gui.min.js
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 47
- 0
examples/widget/compass.html Ver arquivo

@@ -0,0 +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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>

<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,
{
style:'img',
crs:'WGS84'
}
)
viewer.addBaseLayer(baseLayer)
viewer.compass.enable = true
addGuiController() // add controller
}

function addGuiController(){
let controls = {
enable :true,
}
let gui = new dat.GUI();
gui.add(controls,'enable',).onChange(value=>{
viewer.compass.enable = value
})
}

DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)

</script>

+ 48
- 0
examples/widget/contextmenu.html Ver arquivo

@@ -0,0 +1,48 @@
<!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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>

<script>
let viewer = undefined
function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,
{
style:'img',
crs:'WGS84'
}
)
viewer.addBaseLayer(baseLayer)
viewer.contextMenu.enable = true
addGuiController() // add controller
}

function addGuiController(){
let controls = {
enable :true,
}
let gui = new dat.GUI();
gui.add(controls,'enable',).onChange(value=>{
viewer.contextMenu.enable = value
})
}

DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
</html>

+ 46
- 0
examples/widget/distance_legend.html Ver arquivo

@@ -0,0 +1,46 @@
<!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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
style: 'img'
})
viewer.addBaseLayer( baseLayer)
viewer.distanceLegend.enable = true
addGuiController() // add controller
}

function addGuiController(){
let controls = {
enable :true,
}
let gui = new dat.GUI();
gui.add(controls,'enable',).onChange(value=>{
viewer.distanceLegend.enable = value
})
}

DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)

</script>
</body>
</html>

+ 49
- 0
examples/widget/hawkeye_map.html Ver arquivo

@@ -0,0 +1,49 @@
<!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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>

<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
style:'img'
})
viewer.addBaseLayer( baseLayer)
viewer.hawkeyeMap.enable = true
viewer.hawkeyeMap.addBaseLayer(
DC.ImageryLayerFactory.createAmapImageryLayer()
)
addGuiController() // add controller
}

function addGuiController(){
let controls = {
enable :true,
}
let gui = new dat.GUI();
gui.add(controls,'enable',).onChange(value=>{
viewer.hawkeyeMap.enable = value
})
}

DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
</html>

+ 47
- 0
examples/widget/loading_mask.html Ver arquivo

@@ -0,0 +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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>

<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
style: 'img'
})
viewer.addBaseLayer( baseLayer)
viewer.loadingMask.enable = true
addGuiController() // add controller
}

function addGuiController(){
let controls = {
enable :true,
}
let gui = new dat.GUI();
gui.add(controls,'enable',).onChange(value=>{
viewer.loadingMask.enable = value
})
}

DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)

</script>
</body>
</html>

+ 48
- 0
examples/widget/locationbar.html Ver arquivo

@@ -0,0 +1,48 @@
<!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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>

<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
style: 'img'
})
viewer.addBaseLayer( baseLayer)
viewer.locationBar.enable = true
addGuiController() // add controller
}

function addGuiController(){
let controls = {
enable :true,
}
let gui = new dat.GUI();
gui.add(controls,'enable',).onChange(value=>{
viewer.locationBar.enable = value
})
}

DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)

</script>
</body>
</html>

+ 61
- 0
examples/widget/popup.html Ver arquivo

@@ -0,0 +1,61 @@
<!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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

function generatePosition(num) {
let list = []
for (let i = 0; i < num; i++) {
let lng = 120.38105869 + Math.random() * 0.5
let lat = 31.10115627 + Math.random() * 0.5
list.push([lng, lat, 0])
}
return list
}

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
style: 'img',
crs:'WGS84'
})
viewer.addBaseLayer( baseLayer)
viewer.popup.config = {
customClass: 'custom-popup'
}
let layer = new DC.VectorLayer('layer').addTo(viewer)
viewer.contextMenu.enable = true
let positions = generatePosition(20)
positions.forEach((item,index) => {
let point = new DC.Point(item)
point.attr={
index:index + 1
}
point.on(DC.MouseEventType.CLICK,e=>{
viewer.popup.showAt(e.position,`我是第${e.overlay.attr.index}点`)
})
point.addTo(layer)
})
viewer.flyTo(layer)

}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
</html>

+ 78
- 0
examples/widget/scene_split.html Ver arquivo

@@ -0,0 +1,78 @@
<!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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>

<script>
let viewer = undefined

function changeEnable(checked){
viewer.mapSplit.enable = Boolean(checked)
}

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let key = '1c3ff1358b17417f1782dd1ae7bdd00a'
let img = DC.ImageryLayerFactory.createTdtImageryLayer({
key,
style: 'img'
})
viewer.addBaseLayer(img)
let layer = new DC.TilesetLayer('layer').addTo(viewer)
let tileset = new DC.Tileset(
'//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
)
tileset.setHeight(-420)
tileset.setSplitDirection(-1)
layer.addOverlay(tileset)
viewer.sceneSplit.enable = true
viewer.sceneSplit.addBaseLayer(DC.ImageryLayerFactory.createTdtImageryLayer({
key
}))

let tileset_right = new DC.Tileset(
'//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
)
tileset_right.setStyle(new DC.TilesetStyle({
color : {
conditions : [
['true', 'rgba(255,255,0,0.8)']
]
},
})
)
tileset_right.setHeight(-420)
tileset_right.setSplitDirection(1)
viewer.sceneSplit.addTileset(tileset_right)
addGuiController() // add controller
viewer.flyTo(tileset)
}

function addGuiController(){
let controls = {
enable :true,
}
let gui = new dat.GUI();
gui.add(controls,'enable',).onChange(value=>{
viewer.sceneSplit.enable = value
})
}

DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
</html>

+ 49
- 0
examples/widget/tooltip.html Ver arquivo

@@ -0,0 +1,49 @@
<!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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
style: 'img',
crs:'WGS84'
})
viewer.addBaseLayer( baseLayer)
viewer.tooltip.enable = true
viewer.on(DC.MouseEventType.MOUSE_MOVE, e => {
viewer.tooltip.showAt(e.windowPosition, '我是鼠标提示')
})
addGuiController() // add controller
}

function addGuiController(){
let controls = {
enable :true,
}
let gui = new dat.GUI();
gui.add(controls,'enable',).onChange(value=>{
viewer.tooltip.enable = value
})
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
</html>

+ 48
- 0
examples/widget/zoom_controller.html Ver arquivo

@@ -0,0 +1,48 @@
<!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>
<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'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

function changeEnable(checked){
viewer.zoomController.enable = Boolean(checked)
}

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createCoordImageryLayer()
viewer.addBaseLayer( baseLayer)
viewer.compass.enable = true
viewer.zoomController.enable = true
addGuiController() // add controller
}

function addGuiController(){
let controls = {
enable :true,
}
let gui = new dat.GUI();
gui.add(controls,'enable',).onChange(value=>{
viewer.zoomController.enable = value
})
}


DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
</html>

+ 63
- 0
src/themes/loading-mask.scss Ver arquivo

@@ -0,0 +1,63 @@
.widget.loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.6);

.loading {
width: 150px;
height: 15px;
margin: 0 auto;
}

.loading span {
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: #b8e9ff;
-webkit-animation: load 1.04s ease infinite;
}

.loading span:last-child {
margin-right: 0;
}

@-webkit-keyframes load {
0% {
opacity: 1;
transform: scale(1.3);
}

100% {
opacity: 0.2;
transform: scale(0.3);
}
}

.loading span:nth-child(1) {
-webkit-animation-delay: 0.13s;
}

.loading span:nth-child(2) {
-webkit-animation-delay: 0.26s;
}

.loading span:nth-child(3) {
-webkit-animation-delay: 0.39s;
}

.loading span:nth-child(4) {
-webkit-animation-delay: 0.52s;
}

.loading span:nth-child(5) {
-webkit-animation-delay: 0.65s;
}
}

+ 13
- 0
src/themes/popup.scss Ver arquivo

@@ -0,0 +1,13 @@
.widget.popup {
position: absolute;
left: 0;
top: 0;
min-width: 120px;
min-height: 10px;
padding: 10px 10px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
visibility: hidden;
z-index: -1;
cursor: pointer;
}

+ 23
- 0
src/themes/zoom-controller.scss Ver arquivo

@@ -0,0 +1,23 @@
.widget.zoom-controller{
position: absolute;
top: 90px;
right: 36.5px;
pointer-events: auto;
user-select: none;
background: #3f4854;
border-radius: 100px;
border: solid 1px rgba(255,255,255,0.2);
text-align: center;
box-sizing: border-box;
line-height: 1.2rem;
width: 24px;
height: 60px;
.zoom-in ,.refresh,.zoom-out{
cursor: pointer;
svg{
width: 10px;
height: 10px;
fill: #fff;
}
}
}

Escrever Pré-visualização
Carregando…
Cancelar
Salvar