<template>
  <div id="main">
     <div id="map"></div>
     <div class="btn">
        <button @click="change">修改热点数据及样式</button>
        <button @click="remove">移除热力图</button>
        <button @click="addEchartsComponentOnMap">添加echarts组件到地图</button>
     </div>
  </div>
</template>

<script>
import TMap from '../plugin/index.js'
import Map from 'ol/Map';
import {get as getProjection} from 'ol/proj';

import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

import Vue from 'vue'
import echart from './echartOnMap'

export default {
  data() {
    return {

    }
  },
  methods: {
    addEchartsComponentOnMap() {
      const echartClass = Vue.extend(echart)
      // 武汉、北京、上海
      let centers = [[114.216652,30.579401], [116.068297,39.892297], [121.449713,31.253514]]
      centers.forEach(center => {
        this.map.addElement({
          center,
          content: echartClass
        })
      })
    },
    remove() {
        this.heatmap.remove()
    },
    change() {
        this.heatmap.setRadius(10)
        this.heatmap.setBlur(18)
        this.heatmap.setColors([
            "#2200FF",
            "#16D9CC",
            "#4DEE12",
            "#E8D225",
            "#EF1616"
        ])
        let data = [
            {name: "武汉", center:[114.216652,30.579401],count:8},
            {name: "北京", center:[116.068297,39.892297],count:5},
            {name: "上海", center:[121.449713,31.253514],count:10},
            {name: "广州", center:[113.226755,23.183277],count:3},
            {name: "成都", center:[104.035634,30.714315],count:2}
        ]
        this.heatmap.update(data)
    },
    addHeatMap() {
      let option = {
        data: [{name: "武汉", center:[114.216652,30.579401],count:8},
            {name: "北京", center:[116.068297,39.892297],count:5}]
      }
      this.heatmap = new TMap.heatmap(option).addTo(this.map)
    },
    initMap() {
      this.map = new TMap.map({
        url: "http://10.10.64.30:8009/geoserver/gwc/service/wmts/?layer=world:world_info&format=image/png",
        center: [114.216652,30.579401],
        zoom: 5,
        maxZoom: 18,
        minZoom: 0,
        target: "map"
      });

      let geojson = ""
      let vectorlayer = new TMap.vectorLayer().addTo(this.map)
      vectorlayer.geojson(geojson)
    },
  },

  mounted() {
    this.initMap()
    this.addHeatMap()
  }
}
</script>

<style>
#main {
  width: 100%;
  height: 100%;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

.btn {
    position: absolute;
    top: 10px;
    left: 10px;
}
</style>
