第八章：百度API地图及热力图-[基于Vue、Django、supermap iserver和gerapy的生态旅游web系统开发实例]

本文链接：https://blog.csdn.net/yopo_AG/article/details/123249359

本章主要介绍在vue中挂载百度API，引用天气服务和热力图

挂载

//public文件夹中index.html
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="<%= BASE_URL %>js/include-web.js"></script>
    <title>生态旅游资源监管系统</title>
    <!-- 百度地图API -->
    <script type="text/javascript"
            src="http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=wFCLMSKGD3Meb2LuDI3A5AKltVE0pK0b"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/getscript?v=2.0&ak=wFCLMSKGD3Meb2LuDI3A5AKltVE0pK0b"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.139/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

调用天气服务

methods: {
    predict() {
      //调用百度API
      //渭滨区
      this.$axios.get('/bapi/weather/v1/?district_id=610302&data_type=all&ak=4PmNGerqU4hZujfCbGOWjTFwvfFQ73jq&output=json')
        .then(response => {
          this.pushPredata(response.data)
        })
        .catch(function (error) {
          console.log(error);
        });
      //陈仓区
      this.$axios.get('/bapi/weather/v1/?district_id=610304&data_type=all&ak=4PmNGerqU4hZujfCbGOWjTFwvfFQ73jq&output=json')
        .then(response => {
          this.pushPredata(response.data)
        })
        .catch(function (error) {
          console.log(error);
        });
      //凤县
      this.$axios.get('/bapi/weather/v1/?district_id=610330&data_type=all&ak=4PmNGerqU4hZujfCbGOWjTFwvfFQ73jq&output=json')
        .then(response => {
          this.pushPredata(response.data)
        })
        .catch(function (error) {
          console.log(error);
        });
      //太白县
      this.$axios.get('/bapi/weather/v1/?district_id=610331&data_type=all&ak=4PmNGerqU4hZujfCbGOWjTFwvfFQ73jq&output=json')
        .then(response => {
          this.pushPredata(response.data)
        })
        .catch(function (error) {
          console.log(error);
        });
      //眉县
      this.$axios.get('/bapi/weather/v1/?district_id=610326&data_type=all&ak=4PmNGerqU4hZujfCbGOWjTFwvfFQ73jq&output=json')
        .then(response => {
          this.pushPredata(response.data)
        })
        .catch(function (error) {
          console.log(error);
        });
      //岐山县
      this.$axios.get('/bapi/weather/v1/?district_id=610323&data_type=all&ak=4PmNGerqU4hZujfCbGOWjTFwvfFQ73jq&output=json')
        .then(response => {
          this.pushPredata(response.data)
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    ...mapMutations('warning', ['pushPredata'])
  },
}
</script>

效果：

使用百度API实现热力图

<script>
import {mapState} from 'vuex'

export default {
  computed: {
    ...mapState('response', {tourists: 'items', location: 'location'})//将warning模块内items数据映射为data
  },
  data() {
    return {}
  },
  methods: {
    onPageLoad() {
      var map = new BMapGL.Map("container");   // 创建地图实例
      var point = new BMapGL.Point(107, 34);   // 创建点坐标
      map.centerAndZoom(point, 10);                    // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true);                 // 开启鼠标滚轮缩放
      map.setTrafficOn();                              // 添加交通流量图层
      var view = new mapvgl.View({
        map: map
      });
      var heatmap = new mapvgl.HeatmapLayer({
        size: 5000, // 单个点绘制大小
        max: 300, // 最大阈值
        height: 0, // 最大高度，默认为0
        unit: 'm', // 单位，m:米，px: 像素
        gradient: { // 对应比例渐变色
          0.25: 'rgba(0, 0, 255, 0.8)',
          0.55: 'rgba(0, 255, 0, 0.8)',
          0.85: 'rgba(255, 255, 0, 0.8)',
          1: 'rgba(255, 0, 0, 0.8)'
        }
      });
      view.addLayer(heatmap);
      heatmap.setData(this.tourists);
      for (var i = 0; i < this.location.length; i++) {
        var point = new BMapGL.Point(this.location[i][0], this.location[i][1]);
        var opts = {
          position: point,    // 指定文本标注所在的地理位置
          offset: new BMapGL.Size(0, 15)    //设置文本偏移量
        }
        var label = new BMapGL.Label(this.location[i][2], opts);
        label.setStyle({
          color: 'black',
          fontSize: '15px',
          height: '20px',
          lineHeight: '20px',
          fontFamily: '微软雅黑'
        });
        map.addOverlay(label);
      }
    }
  },
  mounted() {
    this.onPageLoad()
  }
}
</script>