第⼋章：百度API地图及热⼒图-[基于Vue、Django、
supermapiserver。。。
本章主要介绍在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="api.map.baidu/getscript?type=webgl&v=1.0&ak=wFCLMSKGD3Meb2LuDI3A5AKltVE0pK0b"></script>
<script type="text/javascript"
src="api.map.baidu/getscript?v=2.0&ak=wFCLMSKGD3Meb2LuDI3A5AKltVE0pK0b"></script>
<script src="code.bdstatic/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.$('/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.$('/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.$('/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.$('/bapi/weather/v1/?district_id=610331&data_type=all&ak=4PmNGerqU4hZujfCbGOWjTFwvfFQ73jq&output=json') .then(response => {
this.pushPredata(response.data)
})
.catch(function (error) {
django项目实例console.log(error);
});
//眉县
this.$('/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.$('/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.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.urists);
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() {
}
}
</script>
发表评论