Caven Chen
преди 2 години
променени са 14 файла, в които са добавени 633 реда и са изтрити 0 реда
+ 13
- 0
examples/dat.gui.min.js
Файловите разлики са ограничени, защото са твърде много
Целия файл
+ 47
- 0
examples/widget/compass.html
Целия файл
| <!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
Целия файл
| <!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
Целия файл
| <!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
Целия файл
| <!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
Целия файл
| <!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
Целия файл
| <!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
Целия файл
| <!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
Целия файл
| <!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
Целия файл
| <!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
Целия файл
| <!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
Целия файл
| .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
Целия файл
| .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
Целия файл
| .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; | |||||
| } | |||||
| } | |||||
| } |
Loading…