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 turf examples

tags/4.0.0
cavencj 11 months ago
parent
c0377bcd7a
commit
c3eba45da4
9 changed files with 537 additions and 0 deletions
Unified View Show Diff Stats
  1. 65
    0
      examples/effect/sky_line.html
  2. 88
    0
      examples/turf.min.js
  3. 45
    0
      examples/turf/point_buffer.html
  4. 56
    0
      examples/turf/polygon_buffer.html
  5. 55
    0
      examples/turf/polygon_rotate.html
  6. 56
    0
      examples/turf/polygon_scale.html
  7. 59
    0
      examples/turf/polygon_sector.html
  8. 57
    0
      examples/turf/polyline_buffer.html
  9. 56
    0
      examples/turf/polyline_rotate.html

+ 65
- 0
examples/effect/sky_line.html View File

<!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
let effect = undefined
function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baselayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style: 'img'
})
viewer.addBaseLayer(baselayer)
effect = new DC.Effect(viewer)

let layer = new DC.TilesetLayer('layer')
viewer.addLayer(layer)
let tileset = new DC.Tileset(
'//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
)
tileset.setHeight(-420)
layer.addOverlay(tileset)
viewer.flyTo(tileset)
effect.skyLine.enable= true
addGuiController() // add controller
}

function addGuiController(){
let controls = {
enable:true,
depthThreshold: 0.00001,
color:'#ff0000'
}
let gui = new dat.GUI()


gui.add(controls,'enable').onChange(value=>{
effect.skyLine.enable=value
})

gui.add(controls,'depthThreshold',0.00001,0.1).step(0.001).onChange(value=>{
effect.skyLine.depthThreshold=value
})

gui.addColor(controls,'color').onChange(value=>{
effect.skyLine.color = DC.Color.fromCssColorString(value)
})
}

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

+ 88
- 0
examples/turf.min.js
File diff suppressed because it is too large
View File


+ 45
- 0
examples/turf/point_buffer.html View File

<!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='../turf.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)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let point = new DC.Point("120.71259021075333,31.22148081085083")
layer.addOverlay(point)
let coords = DC.GeoTools.pointBuffer("120.71259021075333,31.22148081085083",100)
let polygon = new DC.Polygon(coords)
polygon.setStyle({
material: DC.Color.RED.withAlpha(0.4)
})
layer.addOverlay(polygon)
viewer.flyTo(layer)
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/',
turf: window.turf
}).then(initViewer)
</script>
</body>
</html>

+ 56
- 0
examples/turf/polygon_buffer.html View File

<!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='../turf.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)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let polygon = new DC.Polygon("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343")
polygon.setStyle({
zIndex:1,
material:DC.Color.YELLOW
})
layer.addOverlay(polygon)
let coords = DC.GeoTools.polygonBuffer("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343",150)
let buffer = new DC.Polygon(coords)
buffer.setStyle({
material:DC.Color.RED.withAlpha(0.4)
})
layer.addOverlay(buffer)
viewer.flyTo(layer)
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/',
turf:window.turf
}).then(initViewer)
</script>
</body>
</html>








+ 55
- 0
examples/turf/polygon_rotate.html View File

<!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='../turf.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')

viewer.setOptions({
enableFxaa:true
})
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style:'img',
crs:'WGS84'
})
viewer.addBaseLayer( baseLayer)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let polygon = new DC.Polygon("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343")
polygon.setStyle({
material:DC.Color.YELLOW
})
layer.addOverlay(polygon)
let coords = DC.GeoTools.transformPolygonRotate("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343",45)
polygon = new DC.Polygon(coords)
polygon.setStyle({
zIndex:1,
material:DC.Color.RED.withAlpha(0.5)
})
layer.addOverlay(polygon)
viewer.flyTo(layer)
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/',
turf:window.turf
}).then(initViewer)
</script>
</body>
</html>



+ 56
- 0
examples/turf/polygon_scale.html View File

<!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='../turf.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)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let polygon = new DC.Polygon("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343")
polygon.setStyle({
material:DC.Color.YELLOW
})
layer.addOverlay(polygon)
let coords = DC.GeoTools.transformPolygonScale("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343",1.5)
let buffer = new DC.Polygon(coords)
buffer.setStyle({
zIndex:1,
material:DC.Color.RED.withAlpha(0.4)
})
layer.addOverlay(buffer)
viewer.flyTo(layer)
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/',
turf:window.turf
}).then(initViewer)
</script>
</body>
</html>








+ 59
- 0
examples/turf/polygon_sector.html View File

<!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='../turf.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)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let polygon = new DC.Polygon(DC.GeoTools.sector('120.71259021075333,31.22148081085083',100,20,60))
polygon.setStyle({
material: DC.Color.YELLOW,
extrudedHeight:8,
})
layer.addOverlay(polygon)

polygon = new DC.Polygon(DC.GeoTools.sector('120.71259021075333,31.22148081085083',100,220,260))
polygon.setStyle({
material: DC.Color.BLUE.withAlpha(.6),
outline:true,
extrudedHeight:1,
})
layer.addOverlay(polygon)

polygon = new DC.Polygon(DC.GeoTools.sector('120.71259021075333,31.22148081085083',100,300,340))
polygon.setStyle({
material: DC.Color.RED,
extrudedHeight:5,
})
layer.addOverlay(polygon)
viewer.flyTo(layer)
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/',
turf:window.turf
}).then(initViewer)
</script>
</body>
</html>

+ 57
- 0
examples/turf/polyline_buffer.html View File

<!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='../turf.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')
viewer.setOptions({
enableFxaa:true
})

let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style:'img',
crs:'WGS84',
})
viewer.addBaseLayer( baseLayer)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let polyline = new DC.Polyline("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566")
polyline.setStyle({
width:2,
material:DC.Color.YELLOW,
zIndex:1
})
layer.addOverlay(polyline)
let coords = DC.GeoTools.polylineBuffer("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566",100)
let polygon = new DC.Polygon(coords)
polygon.setStyle({
material:DC.Color.RED.withAlpha(0.4)

})
layer.addOverlay(polygon)
viewer.flyTo(layer)
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/',
turf:window.turf
}).then(initViewer)
</script>
</body>
</html>



+ 56
- 0
examples/turf/polyline_rotate.html View File

<!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='../turf.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')
viewer.setOptions({
enableFxaa:true
})
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style:'img',
crs:'WGS84'
})

viewer.addBaseLayer( baseLayer)
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let polyline = new DC.Polyline("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566")
polyline.setStyle({
width:5,
material:DC.Color.BLUE
})
layer.addOverlay(polyline)
let coords = DC.GeoTools.transformPolylineRotate("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566",80)
polyline = new DC.Polyline(coords)
polyline.setStyle({
width:5,
material:DC.Color.RED
})
layer.addOverlay(polyline)
viewer.flyTo(layer)
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/',
turf:window.turf
}).then(initViewer)
</script>
</body>
</html>



Write Preview
Loading…
Cancel
Save