maptalks - 天际线分析

天际线分析

index.html

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>分析功能 - 天际线分析</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
  <script type="text/javascript" src="/gltf-examples/lib/maptalksgl.js"></script>
  <script type="text/javascript" src="/gltf-examples/lib/maptalks.gltf.js"></script>
  <body>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui/build/dat.gui.min.js"></script>
    <div id="map" class="container"></div>

    <script>
      var map = new maptalks.Map('map', {
        center : [119.99770564181154, 30.00793074487919],
        zoom: 16,
        pitch: 80,
        bearing: -177.60000000000082,
        lights: {
          ambient: {
              color: [0.1, 0.1, 0.1]
          },
          directional: {
              color: [1, 1, 1],
              direction: [0, 1, -1],
          }
        },
        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ['a','b','c','d'],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
      });
      var gui = new dat.GUI({ width: 250 });
      var Config = function () {
        this.visible = true;
      };
      var options = new Config();
      var url = '../../../../resource/gltf/city_model/scene.gltf';
      var symbol = {
        url: url,
        visible : options.visible,
        rotation: [90, 0, 0],
        scale: [0.01, 0.01, 0.01],
        uniforms:{
          lightAmbient: [0.4, 0.4, 0.4]
        }
      };
      const sceneConfig = {
      };
      var gltflayer = new maptalks.GLTFLayer('gltf');
      var position = map.getCenter();
      var gltfmarker = new maptalks.GLTFMarker(position, {
        outline: true,
        symbol: symbol
      }).addTo(gltflayer);
      const gllayer = new maptalks.GroupGLLayer('group', [gltflayer],  { sceneConfig }).addTo(map);
      const analysisOptions = {
        lineColor: [0,0,1],
        lineWidth: 1.2
      };
      const analysis = new maptalks.SkylineAnalysis(analysisOptions);
      analysis.addTo(gllayer);
      
      AddGUI();
      
      function AddGUI() {
        var gui = new dat.GUI( { width: 350 } );
        const config = {
          enableAnalysis: true,
          lineColor: [analysisOptions.lineColor[0] * 255, analysisOptions.lineColor[1] * 255, analysisOptions.lineColor[2] * 255],
          lineWidth: analysisOptions.lineWidth
        };
      
        //开启分析功能
        var AnalysisController = gui.add(config, "enableAnalysis");
        AnalysisController.onChange(function (value) {
          if (value) {
            analysis.addTo(gllayer);
          } else {
            analysis.remove();
          }
        });
      
        var lineColorController = gui.addColor(config, 'lineColor');
        lineColorController.onChange(function (value) {
          analysisOptions.lineColor = [value[0] / 255, value[1] / 255, value[2] / 255];
          analysis.update('lineColor', analysisOptions.lineColor);
        });
      
        var lineWidthController = gui.add(config, "lineWidth", 0.1, 3);
        lineWidthController.onChange(function (value) {
          analysisOptions.lineWidth = value;
          analysis.update('lineWidth', value);
        });
      }

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

AddGUI();

function AddGUI() {
  var gui = new dat.GUI({
    width: 350
  });
  const config = {
    enableAnalysis: true,
    lineColor: [analysisOptions.lineColor[0] * 255, analysisOptions.lineColor[1] * 255, analysisOptions.lineColor[2] * 255],
    lineWidth: analysisOptions.lineWidth
  };

//开启分析功能
  var AnalysisController = gui.add(config, "enableAnalysis");
  AnalysisController.onChange(function(value) {
    if (value) {
      analysis.addTo(gllayer);
    } else {
      analysis.remove();
    }
  });

var lineColorController = gui.addColor(config, 'lineColor');
  lineColorController.onChange(function(value) {
    analysisOptions.lineColor = [value[0] / 255, value[1] / 255, value[2] / 255];
    analysis.update('lineColor', analysisOptions.lineColor);
  });

var lineWidthController = gui.add(config, "lineWidth", 0.1, 3);
  lineWidthController.onChange(function(value) {
    analysisOptions.lineWidth = value;
    analysis.update('lineWidth', value);
  });
}