<template>
|
<div class="container">
|
<div id="allmap" ref="rootmap" class="map" />
|
</div>
|
</template>
|
|
<script>
|
import 'echarts/extension/bmap/bmap'
|
require('echarts/extension/bmap/bmap') // echarts theme
|
import { styleJson, Area } from './styleJson'
|
import { heatmapData } from './heatmapData'
|
var that
|
var map
|
var myCompOverlay
|
var canvasLayer
|
export default {
|
name: 'Home',
|
components: {
|
},
|
data() {
|
return {
|
seledAir: {
|
liearNum: null
|
}
|
}
|
},
|
mounted() {
|
that.createMap()
|
},
|
created() {
|
that = this
|
},
|
methods: {
|
createMap() {
|
console.log('styleJson')
|
console.log(styleJson)
|
console.log(Area)
|
/* eslint-disable */
|
// 创建Map实例
|
map = new BMap.Map('allmap', {
|
enableBizAuthLogo: false,
|
enableMapClick: false,
|
minZoom: 12
|
})
|
map.disableBizAuthLogo()
|
// 初始化地图,设置中心点坐标和地图级别
|
map.centerAndZoom(new BMap.Point(118.50, 31.576), 15)
|
map.setMapStyleV2({styleJson:styleJson})
|
//开启鼠标滚轮缩放
|
map.enableScrollWheelZoom(true)
|
// 根据城区经纬度画出蓝色边框范围
|
let polygonArr = []
|
for (let item of Area) {
|
let str = new BMap.Point(item[0], item[1])
|
polygonArr.push(str)
|
}
|
var polygon = new BMap.Polygon(polygonArr, {strokeColor: '#069DED', strokeWeight: 4, strokeOpacity: 0, fillColor: '', fillOpacity: 0})
|
polygon.disableMassClear()
|
map.addOverlay(polygon)
|
// 边框外用带透明度的遮罩层遮住
|
that.addMask(map, polygonArr)
|
// 调取接口返回三角形三个点坐标和三角形的值 数据格式 coordinate: [[118.549255, 31.6020924], [118.549105, 31.6019925], [118.549283, 31.6018866]],value: 0.24462712152735824
|
that.httpNumber()
|
/* eslint-enable */
|
},
|
canvasLayer(tranArr) {
|
// 初始化CanvasLayer
|
canvasLayer = new BMap.CanvasLayer({
|
zIndex: -1,
|
update: update
|
})
|
function update() {
|
var ctx = this.canvas.getContext('2d')
|
if (!ctx) {
|
return
|
}
|
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
|
ctx.beginPath()
|
ctx.strokeStyle = '#069DED'
|
ctx.lineWidth = 4
|
|
map.getPanes()['mapPane'].appendChild(this.canvas)
|
const colorArr = that.getColorArr(that.seledAir.liearNum)
|
// 遍历数据，画出三角形，并根据三角形的值找出相应的颜色
|
for (let i = 0; i < tranArr.length; i++) {
|
const itemObj = tranArr[i]
|
const color = colorArr[parseInt(itemObj.value)]
|
ctx.beginPath()
|
ctx.shadowBlur = 0
|
ctx.shadowColor = 'rgba(0,0,0,0)'
|
const tringle = itemObj.coordinate
|
for (let j = 0; j < tringle.length; j++) {
|
const item = tringle[j]
|
const pointXY = map.pointToPixel(new BMap.Point(item[0], item[1]))
|
if (i === 0) {
|
if (j === 0) {
|
ctx.moveTo(pointXY.x, pointXY.y)
|
} else {
|
ctx.lineTo(pointXY.x, pointXY.y)
|
}
|
} else {
|
if (j === 0) {
|
ctx.moveTo(pointXY.x, pointXY.y)
|
} else {
|
ctx.lineTo(pointXY.x, pointXY.y)
|
}
|
}
|
}
|
ctx.fillStyle = color
|
ctx.fill()
|
}
|
}
|
map.addOverlay(canvasLayer)
|
},
|
// 测试数据
|
httpNumber() {
|
console.log('请求')
|
// this.$axios.get('http://ip.../data').then(res => {
|
// const data = res.data
|
// that.canvasLayer(data)
|
// })
|
that.canvasLayer(heatmapData)
|
},
|
getColorArr(arr) {
|
const blankArr = []
|
const colorArr = []
|
blankArr.push(arr[0])
|
for (let i = 0; i < arr.length - 1; i++) {
|
const blank = arr[i + 1] - arr[i]
|
blankArr.push(blank)
|
}
|
for (let i = 0; i < blankArr.length; i++) {
|
if (i === 0) {
|
for (let j = 0; j < blankArr[i]; j++) {
|
const color = 'rgba(' + Math.round(j * 1.28) + ',255,0,0.6)'
|
colorArr.push(color)
|
}
|
}
|
if (i === 1) {
|
for (let j = 0; j < blankArr[i]; j++) {
|
const color = 'rgba(' + Math.round(j * 128 / blankArr[i] + 128) + ',255,0,0.6)'
|
colorArr.push(color)
|
}
|
}
|
if (i === 2) {
|
for (let j = 0; j < blankArr[i]; j++) {
|
const color = 'rgba(255,' + Math.round(255 - j * 128 / blankArr[i]) + ',0,0.6)'
|
colorArr.push(color)
|
}
|
}
|
if (i === 3) {
|
for (let j = 0; j < blankArr[i]; j++) {
|
const color = 'rgba(255,' + Math.round(128 - j * 128 / blankArr[i]) + ',0,0.6)'
|
colorArr.push(color)
|
}
|
}
|
if (i === 4) {
|
for (let j = 0; j < blankArr[i]; j++) {
|
const color = 'rgba(' + Math.round(255 - j * 64 / blankArr[i]) + ',0,0,0.6)'
|
colorArr.push(color)
|
}
|
}
|
if (i === 5) {
|
for (let j = 0; j < blankArr[i]; j++) {
|
const color = 'rgba(' + Math.round(191 - j * 64 / blankArr[i]) + ',0,0,0.6)'
|
colorArr.push(color)
|
}
|
}
|
}
|
return colorArr
|
},
|
// 添加遮罩
|
addMask(map, points) {
|
var maskPoints = points
|
var EN_JW = new BMap.Point(170.672126, 81.291804) // 东北角
|
var NW_JW = new BMap.Point(-169.604276, 81.291804) // 西北角
|
var WS_JW = new BMap.Point(-169.604276, -68.045308) // 西南角
|
var SE_JW = new BMap.Point(170.672126, -68.045308) // 东南角
|
// 添加环形遮罩层
|
if (points.length > 0) {
|
maskPoints.push(maskPoints[0])
|
}
|
maskPoints.push(EN_JW)
|
maskPoints.push(SE_JW)
|
maskPoints.push(WS_JW)
|
maskPoints.push(NW_JW)
|
maskPoints.push(EN_JW)
|
var mask = new BMap.Polygon(maskPoints, { strokeColor: 'none', fillColor: '#0d131e', strokeOpacity: 1, fillOpacity: 0.85 })
|
mask.disableMassClear()
|
map.addOverlay(mask)
|
}
|
}
|
}
|
</script>
|
