fuyuhang
/
Project_yhfu
зеркало из http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<html>
  <head>
    <meta charset="utf-8" />
    <title data-i18n="resources.title_taxiRoutesOfCapeTown"></title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <script
      type="text/javascript"
      include="echarts,echarts-gl,shapefile"
      src="../../dist/mapboxgl/include-mapboxgl.js"
    ></script>
    <script type="text/javascript">
      var data;
      var attribution =
        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "| Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
        "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " +
        resources.title_3baidu +
        ' ECharts Echarts-gl</a>';
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var tileURL = host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}';

      var myChart = echarts.init(document.getElementById('map'));

      var ENCODE_SCALE = 1e6;

      //解码数据格式
      function decodeLine(line) {
        var result = [];
        var prevX = line[0];
        var prevY = line[1];

        for (var i = 0; i < line[2].length; i += 2) {
          var x = line[2].charCodeAt(i) - 64;
          var y = line[2].charCodeAt(i + 1) - 64;
          // ZigZag decoding
          x = (x >> 1) ^ -(x & 1);
          y = (y >> 1) ^ -(y & 1);
          // Delta deocding
          x += prevX;
          y += prevY;

          prevX = x;
          prevY = y;
          // Dequantize
          result.push([x / ENCODE_SCALE, y / ENCODE_SCALE, 10]);
        }
        return result;
      }

      var geoJSON = {
        type: 'FeatureCollection',
        features: []
      };
      var regions = [];

      shapefile.open('../data/taxiRoutesOfCapeTown.shp', '../data/taxiRoutesOfCapeTown.dbf').then(function(source) {
        return source.read().then(function append(result) {
          if (result.done) {
            cbk(geoJSON);
            return;
          }

          var feature = result.value;
          feature.properties.name = geoJSON.features.length + '';
          regions.push({
            name: geoJSON.features.length + '',
            value: 1,
            height: feature.properties.SHAPE_leng * 10000
          });
          geoJSON.features.push(feature);

          return source.read().then(append);
        });
      });

      function cbk(geoJSON) {
        $.get('../data/taxiRoutesOfCapeTown.json', function(data) {
          var lines = data.map(function(track) {
            return {
              coords: decodeLine(track)
            };
          });

          //修改v3.8.5 echarts.js文件的BUG
          //            echarts.parseGeoJSON = echarts.parseGeoJson;

          echarts.registerMap('buildings', geoJSON);

          myChart.setOption({
            mapbox: {
              center: [18.424552361777955, -33.92188144682616],
              zoom: 14,
              pitch: 50,
              bearing: -10,
              altitudeScale: 2,
              style: {
                version: 8,
                sources: {
                  'raster-tiles': {
                    attribution: attribution,
                    type: 'raster',
                    tiles: [tileURL],
                    tileSize: 256
                  }
                },
                layers: [
                  {
                    id: 'simple-tiles',
                    type: 'raster',
                    source: 'raster-tiles',
                    minzoom: 0,
                    maxzoom: 22
                  }
                ]
              },
              postEffect: {
                enable: true,
                screenSpaceAmbientOcclusion: {
                  enable: true,
                  intensity: 1.2,
                  radius: 6,
                  quality: 'low'
                },
                screenSpaceReflection: {
                  enable: true
                }
              },
              light: {
                main: {
                  intensity: 1,
                  shadow: true,
                  shadowQuality: 'high'
                },
                ambient: {
                  intensity: 0
                },
                ambientCubemap: {
                  texture: '../data/taxiRoutesOfCapeTown.hdr',
                  exposure: 2,
                  diffuseIntensity: 1,
                  specularIntensity: 2
                }
              }
            },

            series: [
              {
                type: 'lines3D',
                coordinateSystem: 'mapbox',
                effect: {
                  show: true,
                  constantSpeed: 5,
                  trailWidth: 2,
                  trailLength: 0.8,
                  trailOpacity: 1,
                  spotIntensity: 10
                },

                blendMode: 'lighter',

                polyline: true,

                lineStyle: {
                  width: 0.1,
                  color: 'rgb(200, 40, 0)',
                  opacity: 0
                },

                data: lines
              },
              {
                type: 'map3D',
                map: 'buildings',
                coordinateSystem: 'mapbox',
                shading: 'realistic',
                silent: true,
                instancing: true,
                data: regions,
                itemStyle: {
                  color: '#444'
                },
                realisticMaterial: {
                  metalness: 1,
                  roughness: 0.2
                }
              }
            ]
          });
          //获取mapbox对象
          var mapbox = myChart
            .getModel()
            .getComponent('mapbox3D')
            .getMapbox();
          mapbox.addControl(new mapboxgl.NavigationControl(), 'top-left');
        });
      }

      window.addEventListener('keydown', function() {
        myChart.dispatchAction({
          type: 'lines3DToggleEffect',
          seriesIndex: 0
        });
      });
    </script>
  </body>
</html>