<commit_before><template>
  <div id='map-dataview-container'>
    <div id='dataview-info-container'>
      <div style="padding:10px;background-color:#383737;;border-radius:4px">
        <div id="layer-container">
          <div v-for="(layer,meta) in querySourceLayers" class="layer">
            <i class='material-icons' v-if="meta.type=='Point'||meta.type=='MultiPoint'">grade</i>
            <i class='material-icons' v-if="meta.type=='LineString'||meta.type=='MultiLineString'">remove</i>
            <i class='material-icons' v-if="meta.type=='Polygon'||meta.type=='MultiPolygon'">filter_b_and_w</i>
            <span style="font-weight:bold;font-size: 14px;position: relative;bottom: 2px;">{{layer}}</span></br>
            <div v-for="(key,value) in meta.properties" style="margin-left:5px;font-size:12px;">
              <span>{{key}}:</span>
              <span style="color:#c5c5c5;">{{value}}</span>
            </div>
          </div>
        </div>
      </div> 
      <div id='info-tip'></div>
      <i class="material-icons" id="close-info" v-on:click="closeInfoContainer">clear</i>
    </div>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl'
import { diff, validate} from 'mapbox-gl-style-spec'
import Cookies from 'js-cookie'
export default {
  methods: {
    // 地图点击 弹出info
    mapClick: function(e){
      var infoContainer = document.getElementById('dataview-info-container');
      var features = this.map.queryRenderedFeatures(e.point);
      this.querySourceLayers = {};
      var sourceLayers = {};
      if(features.length===0){
        infoContainer.style.display = 'none';
        return;
      }
      for(let i=0;i<features.length;i++){
        var sourceLayer = features[i].layer["source-layer"];
        var properties = features[i].properties;
        var type = features[i].geometry.type;
        if(sourceLayer&&!sourceLayers[sourceLayer]){
          sourceLayers[sourceLayer]={
            type:type,
            properties:properties
          }
        }
      }
      this.querySourceLayers = sourceLayers;
      if(Object.keys(this.querySourceLayers).length>0){
        var containerHeight = 20;//padding值
        for(var layer in this.querySourceLayers){
          var c = Object.keys(this.querySourceLayers[layer].properties).length;
          containerHeight += (c+1)*20;
        }
        if(containerHeight>300){containerHeight=300;}
        infoContainer.style.display = 'block';
        infoContainer.style.left = e.point.x-94 + 'px';
        infoContainer.style.top = e.point.y-containerHeight-17 + 'px';
      }
      //this.querySourceLayers = features;
    },
    closeInfoContainer: function(){
      var info = this.$el.querySelector("#dataview-info-container");
      info.style.display = 'none';
    },
    mapInit: function(style){
      this.localStyle = JSON.parse(JSON.stringify(style));
      mapboxgl.accessToken = '<KEY>';
      var map = new mapboxgl.Map({
        container: 'map-dataview-container',
        center:this.params.center,
        zoom:this.params.zoom,
        style: style,
        attributionControl: false
      });
      map.addControl(new mapboxgl.Navigation());
      this.map = map;
      map.on('click', this.mapClick);
    }
  },
  events:{
    "datamap-init":function(params){
      this.params = params;
      var access_token = Cookies.get('access_token');
      var styleUrl = "./static/config/map-data-view.json";
      this.$http({url:styleUrl,method:'GET',headers:{'x-access-token':access_token}})
      .then(function(res){//从服务器获取地图的stylejson样式
        var data = res.data;
        var initStyle = JSON.parse(JSON.stringify(data));
        this.mapInit(initStyle);
      },function(){
        this.$broadcast('mailSent', { message: '样式信息错误！',timeout:3000 });
      });
    }
  },
  data: function(){
    return {
      map: {},
      localStyle: {},<commit_msg>增加数据选择视图<commit_after><template>
  <div id='map-dataview-container'>
    <div id='dataview-info-container'>
      <div style="padding:10px;background-color:#383737;;border-radius:4px">
        <div id="layer-container">
          <div v-for="(layer,meta) in querySourceLayers" class="layer">
            <i class='material-icons' v-if="meta.type=='Point'||meta.type=='MultiPoint'">grade</i>
            <i class='material-icons' v-if="meta.type=='LineString'||meta.type=='MultiLineString'">remove</i>
            <i class='material-icons' v-if="meta.type=='Polygon'||meta.type=='MultiPolygon'">filter_b_and_w</i>
            <span style="font-weight:bold;font-size: 14px;position: relative;bottom: 2px;">{{layer}}</span></br>
            <div v-for="(key,value) in meta.properties" style="margin-left:5px;font-size:12px;">
              <span>{{key}}:</span>
              <span style="color:#c5c5c5;">{{value}}</span>
            </div>
          </div>
        </div>
      </div> 
      <div id='info-tip'></div>
      <i class="material-icons" id="close-info" v-on:click="closeInfoContainer">clear</i>
    </div>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl'
import { diff, validate} from 'mapbox-gl-style-spec'
import Cookies from 'js-cookie'
export default {
  methods: {
    // 地图点击 弹出info
    mapClick: function(e){
      var infoContainer = document.getElementById('dataview-info-container');
      var features = this.map.queryRenderedFeatures(e.point);
      this.querySourceLayers = {};
      var sourceLayers = {};
      if(features.length===0){
        infoContainer.style.display = 'none';
        return;
      }
      for(let i=0;i<features.length;i++){
        var sourceLayer = features[i].layer["source-layer"];
        var properties = features[i].properties;
        var type = features[i].geometry.type;
        if(sourceLayer&&!sourceLayers[sourceLayer]){
          sourceLayers[sourceLayer]={
            type:type,
            properties:properties
          }
        }
      }
      this.querySourceLayers = sourceLayers;
      if(Object.keys(this.querySourceLayers).length>0){
        var containerHeight = 20;//padding值
        for(var layer in this.querySourceLayers){
          var c = Object.keys(this.querySourceLayers[layer].properties).length;
          containerHeight += (c+1)*20;
        }
        if(containerHeight>300){containerHeight=300;}
        infoContainer.style.display = 'block';
        infoContainer.style.left = e.point.x-94 + 'px';
        infoContainer.style.top = e.point.y-containerHeight-17 + 'px';
      }
      //this.querySourceLayers = features;
    },
    closeInfoContainer: function(){
      var info = this.$el.querySelector("#dataview-info-container");
      info.style.display = 'none';
    },
    mapInit: function(style){
      this.localStyle = JSON.parse(JSON.stringify(style));
      mapboxgl.accessToken = '<KEY>';
      var map = new mapboxgl.Map({
        container: 'map-dataview-container',
        center:this.params.center,
        zoom:this.params.zoom,
        style: style,
        attributionControl: false
      });
      map.addControl(new mapboxgl.Navigation());
      this.map = map;
      map.on('click', this.mapClick);
    }
  },
  events:{
    "datamap-init":function(params){
      this.params = params;
      var access_token = Cookies.get('access_token');
      var styleUrl = "./static/config/map-data-view.json";
      this.$http({url:styleUrl,method:'GET',headers:{'x-access-token':access_token}})
      .then(function(res){//从服务器获取地图的stylejson样式
        var data = res.data;
        var initStyle = JSON.parse(JSON.stringify(data));
        if(this.map.loaded&&this.map.loaded()){
          this.map.setZoom(this.params.zoom);
          this.map.setCenter(this.params.center);
        }else{
          this.mapInit(initStyle);
        }
      },function(){
        this.$broadcast('mailSent', { message: '样式信息错误！',timeout:3000 });
      });
    }
  },
  data: function(){
    return {
      map: {},
      localStyle: {},
{'fraction_non_alphanumeric': 0.16485461441213653, 'fraction_numerical': 0.010113780025284451, 'mean_word_length': 2.735127478753541, 'pattern_counts': {'":': 2, '<': 71, '<?xml version=': 0, '>': 73, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1355550', 'n_tokens_mistral': 2576, 'n_tokens_neox': 2492, 'n_words': 370}