<template>
|
<div id="container" style="width:100%;height:100%" />
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
import $ from 'jquery'
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
props: {},
|
data() {
|
// 这里存放数据
|
return {
|
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created() {
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted() {
|
this.init()
|
},
|
beforeCreate() {}, // 生命周期 - 创建之前
|
beforeMount() {}, // 生命周期 - 挂载之前
|
beforeUpdate() {}, // 生命周期 - 更新之前
|
updated() {}, // 生命周期 - 更新之后
|
beforeDestroy() {}, // 生命周期 - 销毁之前
|
destroyed() {}, // 生命周期 - 销毁完成
|
activated() {},
|
// 方法集合
|
methods: {
|
init() {
|
var map = new AMap.Map('container', {
|
mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536',
|
zoom: 9,
|
center: [120.198254, 36.465551],
|
zooms: [4, 12],
|
pitch: 46,
|
viewMode: '3D'
|
})
|
|
$.get('//a.amap.com/Loca/static/mock/qingdao_500m.tsv', function(heatmapData) {
|
var layer = new Loca.HexagonLayer({
|
map: map,
|
fitView: true,
|
eventSupport: true
|
})
|
|
layer.setData(heatmapData, {
|
lnglat: function(obj) {
|
var val = obj.value
|
return [val['lng'], val['lat']]
|
},
|
value: 'count',
|
type: 'tsv'
|
})
|
|
layer.setOptions({
|
unit: 'meter',
|
mode: 'count',
|
style: {
|
color: ['#4575b4', '#99d594', '#e6f598', '#ffffbf', '#fee08b', '#fee08b', '#d53e4f'],
|
radius: 1000,
|
opacity: 1,
|
gap: 300,
|
height: [0, 11500]
|
}
|
})
|
|
// 事件 legendupdate: 图例数据更新完成回调此函数
|
layer.on('legendupdate', function(ev) {
|
var colorLegend = ev.colorLegend
|
initLegend(colorLegend)
|
})
|
|
// 鼠标事件，鼠标移动，更新数据
|
// layer.on('mousemove', function(ev) {
|
// updateInfo(ev)
|
// })
|
|
layer.render()
|
|
// 鼠标事件更新数据
|
function updateInfo(ev) {
|
var $val = document.getElementById('val')
|
var $idx = document.getElementById('indexes')
|
var $num = document.getElementById('indexes-num')
|
var $lngLat = document.getElementById('lng-lat')
|
|
$val.innerText = ev.value
|
$idx.innerText = ev.indexes.join(', ')
|
$num.innerText = ev.indexes.length
|
$lngLat.innerText = ev.lngLat.valueOf()
|
}
|
|
// 更新图例
|
function initLegend(colorLegend) {
|
var legends = colorLegend.map(item => {
|
// color 为 gradient 传入的格式
|
return `<li class="color-item" style="background-color: ${item.color}"></li>`
|
})
|
|
var ranges = colorLegend.map((item, index) => {
|
// range 可能为小数，可以自行取整计算
|
item.range[0] = Math.round(item.range[0])
|
item.range[1] = Math.round(item.range[1])
|
|
if (index === colorLegend.length - 1) {
|
return `<li class="label-item">${item.range[0]}</li><li class="label-item">${item.range[1]}</li>`
|
}
|
return `<li class="label-item">${item.range[0]}</li>`
|
})
|
|
// document.getElementById('legend-color').innerHTML = legends.join('')
|
// document.getElementById('legend-label').innerHTML = ranges.join('')
|
}
|
})
|
}
|
} // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped>
|
/* @import "//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"; */
|
|
.info span {
|
min-width: 300px;
|
max-width: 400px;
|
color: #1b91ff;
|
}
|
.legend {
|
position: absolute;
|
bottom: 20px;
|
right: 20px;
|
}
|
|
.legend ul {
|
padding: 0;
|
margin: 0;
|
list-style: none;
|
}
|
|
.color-item {
|
width: 30px;
|
height: 20px;
|
display: inline-block;
|
}
|
|
.label-item {
|
display: inline-block;
|
width: 30px;
|
margin-left: -2px;
|
font-size: 14px;
|
}
|
</style>
|
