fuyuhang
/
Project_yhfu
mirrorاز http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_componentsLabelTheme_Vue"></title>
    <style>
      #main {
        margin: 0 auto;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="main">
      <sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
        <sm-label-theme-layer
          :options="themeOptions"
          layer-name="LabelThemeLayer"
          :data="features"
          @load="layerLoaded"
          v-show="!!features.length"
        >
        </sm-label-theme-layer>
      </sm-web-map>
    </div>
    <script type="text/javascript" include="vue,bootstrap" src="../js/include-web.js"></script>
    <script
      include="iclient-mapboxgl-vue,mapbox-gl-enhance"
      src="../../dist/mapboxgl/include-mapboxgl.js"
    ></script>
    <script type="text/javascript" src="../data/themeLableData.js"></script>
    <script>
      new Vue({
        el: '#main',
        data() {
          var host = window.isLocal ? window.server : "https://iserver.supermap.io";
          var attribution =
            "<a href='https://www.mapbtyx.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

          var features = [];
          var feat;
          for (var i = 0; i < themeData.length; i++) {
            var lonlat = themeData[i].lonLat.split(',');
            var lng = parseFloat(lonlat[0]);
            var lat = parseFloat(lonlat[1]);
            var text = themeData[i].aqi;
            feat = new mapboxgl.supermap.ThemeFeature([lng, lat, text], themeData[i]);
            features.push(feat);
          }
          return {
            mapOptions: {
              container: 'map',
              style: {
                version: 8,
                sources: {
                  'raster-tiles': {
                    attribution: attribution,
                    type: 'raster',
                    tiles: [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                    tileSize: 256
                  }
                },
                layers: [
                  {
                    id: 'simple-tiles',
                    type: 'raster',
                    source: 'raster-tiles',
                    minzoom: 0,
                    maxzoom: 22
                  }
                ]
              },
              center: [116.4, 39.79],
              zoom: 3
            },
            features,
            themeOptions: {
              //                map: map,//该可选参数将在下个版本遗弃
              attributions: ' ',
              style: new SuperMap.ThemeStyle({
                labelRect: true,
                fontColor: '#000000',
                fontWeight: 'bolder',
                fontSize: '18px',
                fill: true,
                fillColor: '#FFFFFF',
                fillOpacity: 1,
                stroke: false,
                strokeColor: '#8B7B8B'
              }),
              themeField: 'aqi',
              styleGroups: [
                {
                  start: 0,
                  end: 51,
                  style: {
                    fillColor: '#6ACD06',
                    fontSize: '17px'
                  }
                },
                {
                  start: 51,
                  end: 101,
                  style: {
                    fillColor: '#FBD12A',
                    fontSize: '19px'
                  }
                },
                {
                  start: 101,
                  end: 151,
                  style: {
                    fillColor: '#FE8800',
                    fontSize: '22px'
                  }
                },
                {
                  start: 151,
                  end: 201,
                  style: {
                    fillColor: '#FF0000',
                    fontSize: '24px'
                  }
                },
                {
                  start: 201,
                  end: 301,
                  style: {
                    fillColor: '#CC0000',
                    fontSize: '26px'
                  }
                },
                {
                  start: 301,
                  end: 601,
                  style: {
                    fillColor: '#960453',
                    fontSize: '28px'
                  }
                }
              ]
            }
          };
        },
        methods: {
          mapIsLoaded(e) {
            this.map = e.map;
          },
          updateInfoView(feature, themeLayer) {
            if (!feature && this.popup) {
              this.removePopup();
              return;
            }

            if (!this.popup) {
              this.popup = new mapboxgl.Popup({ maxWidth: 600 });
            }

            var statisticsData = this.getStatisticsData();
            var contentHTML =
              '<table><tbody><tr>' +
              "<td><div style='margin-left: 15px'>" +
              '<table><tbody><tr>' +
              "<td><div id='contentID' style='margin-top: 2px;margin-bottom: 2px;width:65px;height:60px;line-height:60px;text-align: center;font-size:35px;color: #ffffff;'>" +
              feature.attributes.aqi +
              '</div></td>' +
              "<td style='padding-right: 20px;'></td>" +
              '<td>' +
              "<div id='textID' style='text-align: left;font-size: 19px;text-shadow: 1px 1px 0 #ffffff;'>" +
              feature.attributes.quality +
              '</div>' +
              "<div style='font-size:10px;width:150px;'>" +
              feature.attributes.time_point +
              '</div>' +
              "<div style=' font-weight:lighter; font-size:14px;'>" +
              resources.text_currentCity +
              '：' +
              feature.attributes.area +
              '</div>' +
              '</td>' +
              '</tr> </tbody></table>' +
              "<table style='width:100%;font-size: 10px;border: 0 solid black;padding: 0;margin: 0;border-spacing: 0;'>" +
              '<tbody>' +
              '<tr>' +
              "<td style='font-weight:bold;width:45px;'></td><td style='font-weight:bold;width:51px;' align='center' nowrap='true'>Current</td>" +
              "<td  style=' font-weight:bold;width:49px;' align='center' nowrap='true'>Min</td>" +
              "<td style='font-weight:bold;width:49px;' align='center' nowrap='true'>Max</td> " +
              '</tr>' +
              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM2.5</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.pm2_5 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minNum +
              '</td>' +
              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxNum +
              '</td>' +
              '</tr>' +
              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM10</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.pm10 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minpm10 +
              '</td>' +
              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxpm10 +
              '</td>' +
              '</tr>' +
              "<tr style='height:23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>O3</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.o3 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minO3 +
              '</td>' +
              "<td style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxO3 +
              '</td></td>' +
              '</tr>' +
              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>SO2</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.so2 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minSO2 +
              '</td>' +
              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxSO2 +
              '</td></td>' +
              '</tr>' +
              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>NO2</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.no2 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minNO2 +
              '</td>' +
              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxNO2 +
              '</td></td>' +
              '</tr></tbody> </table></div></td></tr></tbody> </table>';

            var latLng = this.getLatLng(feature.attributes.lonLat);
            this.popup
              .setLngLat(latLng)
              .setHTML(contentHTML)
              .addTo(this.map);

            //设置弹框内容颜色
            var groups = themeLayer.styleGroups;
            for (var i = 0; i < groups.length; i++) {
              if (feature.attributes.aqi >= groups[0].start && feature.attributes.aqi < groups[0].end) {
                this.setColor('#6ACD06');
              } else if (feature.attributes.aqi >= groups[1].start && feature.attributes.aqi < groups[1].end) {
                this.setColor('#FBD12A');
              } else if (feature.attributes.aqi >= groups[2].start && feature.attributes.aqi < groups[2].end) {
                this.setColor('#FE8800');
              } else if (feature.attributes.aqi >= groups[3].start && feature.attributes.aqi < groups[3].end) {
                this.setColor('#FF0000');
              } else if (feature.attributes.aqi >= groups[4].start && feature.attributes.aqi < groups[4].end) {
                this.setColor('#CC0000');
              } else if (feature.attributes.aqi >= groups[5].start && feature.attributes.aqi < groups[5].end) {
                this.setColor('#960453');
              }
            }
          },
          getStatisticsData() {
            if (this.statisticsData) {
              return this.statisticsData;
            }
            //遍历数组，获取单个属性。组成新的数组
            var pm25 = [],
              pm10s = [],
              o3s = [],
              so2s = [],
              no2s = [];
            for (var i = 0; i < themeData.length; i++) {
              pm10s.push(themeData[i].pm2_5);
              pm25.push(themeData[i].pm10);
              o3s.push(themeData[i].o3);
              so2s.push(themeData[i].so2);
              no2s.push(themeData[i].no2);
            }
            //获取单个属性的最大最小值
            this.statisticsData = {
              maxNum: Math.max.apply(Math, pm25),
              minNum: Math.min.apply(Math, pm25),
              maxpm10: Math.max.apply(Math, pm10s),
              minpm10: Math.min.apply(Math, pm10s),
              maxO3: Math.max.apply(Math, o3s),
              minO3: Math.min.apply(Math, o3s),
              maxSO2: Math.max.apply(Math, so2s),
              minSO2: Math.min.apply(Math, so2s),
              maxNO2: Math.max.apply(Math, no2s),
              minNO2: Math.min.apply(Math, no2s)
            };
            return this.statisticsData;
          },
          setColor(color) {
            document.getElementById('contentID').style.backgroundColor = color;
            document.getElementById('textID').style.color = color;
          },
          getLatLng(latLng) {
            var latLng = latLng.split(',');
            return [parseFloat(latLng[0]), parseFloat(latLng[1])];
          },
          layerLoaded(themeLayer) {
            themeLayer.on('mousemove', function(e) {
              this.handleMouseOver(themeLayer, e);
            }.bind(this));
          },
          handleMouseOver(themeLayer, e) {
            if (e.target && e.target.refDataID) {
              var fid = e.target.refDataID;
              var fea = themeLayer.getFeatureById(fid);
              if (fea) {
                this.updateInfoView(fea, themeLayer);
              }
            } else {
              this.removePopup();
            }
          },
          removePopup() {
            this.popup && this.popup.remove(this.map);
          }
        }
      });
    </script>
  </body>
</html>