add turf examples

dvgis · Nov 9, 2024 · c3eba45 · c3eba45
1 parent c0377bc
commit c3eba45
Show file tree

Hide file tree

Showing 9 changed files with 537 additions and 0 deletions.
diff --git a/examples/effect/sky_line.html b/examples/effect/sky_line.html
@@ -0,0 +1,65 @@
+<!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>
diff --git a/examples/turf.min.js b/examples/turf.min.js
diff --git a/examples/turf/point_buffer.html b/examples/turf/point_buffer.html
@@ -0,0 +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>
+  <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>
diff --git a/examples/turf/polygon_buffer.html b/examples/turf/polygon_buffer.html
@@ -0,0 +1,56 @@
+<!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>
+
+
+
+
+
+
+
diff --git a/examples/turf/polygon_rotate.html b/examples/turf/polygon_rotate.html
@@ -0,0 +1,55 @@
+<!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>
+
+
diff --git a/examples/turf/polygon_scale.html b/examples/turf/polygon_scale.html
@@ -0,0 +1,56 @@
+<!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>
+
+
+
+
+
+
+
diff --git a/examples/turf/polygon_sector.html b/examples/turf/polygon_sector.html
@@ -0,0 +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>
+  <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>
diff --git a/examples/turf/polyline_buffer.html b/examples/turf/polyline_buffer.html
@@ -0,0 +1,57 @@
+<!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>
+
+