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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!--********************************************************************
* 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_componentsRankSymbolTheme_Vue"></title>
    <style>
      #main {
        margin: 0 auto;
      }

      #main,
      #map {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .legendItemHeader,
      .legendItemValue {
        width: 120px;
        height: 18px;
        font-size: 14px;
      }
    </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-ranksymbol-theme-layer
          :options="themeOptions"
          layer-name="RankSymbolThemeLayer"
          :data="features"
          symbol-type="Circle"
          @load="layerLoaded"
          v-show="!!features.length"
        >
        </sm-ranksymbol-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/chinaConsumptionLevel.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 = [];
          for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
            // 省居民消费水平（单位：元）信息
            var provinceInfo = chinaConsumptionLevel[i];
            var geo = new mapboxgl.LngLat(provinceInfo[1], provinceInfo[2]);
            var attrs = {};
            attrs.NAME = provinceInfo[0];
            attrs.CON2009 = provinceInfo[3];
            var fea = new mapboxgl.supermap.ThemeFeature(geo, attrs);
            features.push(fea);
          }
          return {
            mapOptions: {
              container: 'map',
              style: {
                version: 8,
                sources: {
                  'raster-tiles': {
                    attribution: attribution,
                    type: 'raster',
                    tiles: [
                      host + '/iserver/services/map-china400/rest/maps/China_4326/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.85, 39.79],
              zoom: 3
            },
            features,
            themeOptions: {
              //map: map,//该可选参数将在下个版本遗弃
              attributions: ' ',
              themeField: 'CON2009',
              // 配置图表参数
              symbolSetting: {
                //必设参数
                codomain: [0, 40000], // 允许图形展示的值域范围，此范围外的数据将不制作图图形
                //圆最大半径 默认100
                maxR: 100,
                //圆最小半径 默认0
                minR: 0,
                // 圆形样式
                circleStyle: { fillOpacity: 0.8 },
                // 符号专题图填充颜色
                fillColor: '#FFA500',
                // 专题图hover 样式
                circleHoverStyle: { fillOpacity: 1 }
              }
            }
          };
        },
        methods: {
          mapIsLoaded(e) {
            this.map = e.map;
          },
          layerLoaded(themeLayer) {
            themeLayer.on('mousemove', function(e) {
              return this.showInfoWin(themeLayer, e);
            }.bind(this));
          },
          showInfoWin(themeLayer, e) {
            // e.target 是图形对象，即数据的可视化对象。
            // 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
            // 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field、R 和 value;
            var map = this.map;
            if (e.target && e.target.refDataID && e.target.dataInfo) {
              this.closeInfoWin();
              // 获取图形对应的数据 (feature)
              var fea = themeLayer.getFeatureById(e.target.refDataID);
              var info = e.target.dataInfo;
              // 弹窗内容
              var contentHTML = "<div style='color: #000; background-color: #fff'>";
              contentHTML += resources.text_Name + '<br><strong>' + fea.attributes.NAME + '</strong>';
              contentHTML += "<hr style='margin: 3px'>";
              switch (info.field) {
                case 'CON2009':
                  contentHTML +=
                    resources.text_consumptionLevel1 +
                    '09' +
                    resources.text_consumptionLevel2 +
                    ' <br/><strong>' +
                    info.value +
                    '</strong>（' +
                    resources.text_yuan +
                    '）';
                  break;
                default:
                  contentHTML += 'No Data';
              }
              contentHTML += '</div>';
              var tempPoint = map.unproject(new window.mapboxgl.Point(e.event.x, e.event.y));
              this.popup = new mapboxgl.Popup({ closeOnClick: false })
                .setLngLat([tempPoint.lng, tempPoint.lat])
                .setHTML(contentHTML)
                .addTo(map);
              return;
            }
            this.closeInfoWin();
          },
          closeInfoWin() {
            if (this.popup) {
              this.popup.remove(this.map);
            }
          }
        }
      });
    </script>
  </body>
</html>