<!--
* @Description: echarts-gl地图
* @Author: 王晓颖
* @Date:2020-09-01 14:17:08
-->
<template>
<div :id="id" style="width:100%;height:800px"></div>
</template>
<script>
import 'echarts-gl'
// import 'echarts-bmap'
import {fetchGeojson} from '@/api/geojson'
import {MP, initMap} from '@/utils/baidu-map.js'
import 'mapvgl'
export default {
name: 'GLMap',
props: {
id: {
type: String,
default: 'mapContainer'
}
},
data () {
return {
options: {
backgroundColor: 'transparent',
bmap: {
center: [116.4, 39.9], // 中心点坐标
zoom: 12, // 缩放级别
roam: true, // 用户是否可以拖动和缩放地图
mapStyle: [
{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'color': '#030737'
}
}, {
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'color': '#113549ff'
}
}, {
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'color': '#0e1b30ff'
}
}, {
'featureType': 'building',
'elementType': 'geometry',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'building',
'elementType': 'geometry.fill',
'stylers': {
'color': '#ffffffb3'
}
}, {
'featureType': 'building',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#dadadab3'
}
}, {
'featureType': 'subwaystation',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'color': '#b15454B2'
}
}, {
'featureType': 'education',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'color': '#e4f1f1ff'
}
}, {
'featureType': 'medical',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'color': '#f0dedeff'
}
}, {
'featureType': 'scenicspots',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'color': '#e2efe5ff'
}
}, {
'featureType': 'highway',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'weight': 4
}
}, {
'featureType': 'highway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#f7c54dff'
}
}, {
'featureType': 'highway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#fed669ff'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'highway',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#8f5a33ff'
}
}, {
'featureType': 'highway',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'highway',
'elementType': 'labels.icon',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'weight': 2
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#d8d8d8ff'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#ffeebbff'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'arterial',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#525355ff'
}
}, {
'featureType': 'arterial',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'weight': 1
}
}, {
'featureType': 'local',
'elementType': 'geometry.fill',
'stylers': {
'color': '#d8d8d8ff'
}
}, {
'featureType': 'local',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'local',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'local',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#979c9aff'
}
}, {
'featureType': 'local',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'weight': 1
}
}, {
'featureType': 'railway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#123c52ff'
}
}, {
'featureType': 'railway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#12223dff'
}
}, {
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'weight': 1
}
}, {
'featureType': 'subway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#d8d8d8ff'
}
}, {
'featureType': 'subway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#ffffff00'
}
}, {
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'subway',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#979c9aff'
}
}, {
'featureType': 'subway',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'continent',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'continent',
'elementType': 'labels.icon',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'continent',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#333333ff'
}
}, {
'featureType': 'continent',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'city',
'elementType': 'labels.icon',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'city',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'city',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#454d50ff'
}
}, {
'featureType': 'city',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'town',
'elementType': 'labels.icon',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'town',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'town',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#454d50ff'
}
}, {
'featureType': 'town',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'road',
'elementType': 'geometry.fill',
'stylers': {
'color': '#12223dff'
}
}, {
'featureType': 'poilabel',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'districtlabel',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'road',
'elementType': 'geometry',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'road',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'road',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#ffffff00'
}
}, {
'featureType': 'district',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'poilabel',
'elementType': 'labels.icon',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'poilabel',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#2dc4bbff'
}
}, {
'featureType': 'poilabel',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#ffffff00'
}
}, {
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'color': '#12223dff'
}
}, {
'featureType': 'districtlabel',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'entertainment',
'elementType': 'geometry',
'stylers': {
'color': '#ffffffff'
}
}, {
'featureType': 'shopping',
'elementType': 'geometry',
'stylers': {
'color': '#12223dff'
}
}
]
}
// ,
// series: [{
// type: 'map3D',
// map: 'china',
// coordinateSystem: 'bmap',
// shading: 'realistic',
// silent: true,
// itemStyle: {
// areaColor: '#ff00ff'
// },
// data: [{
// name: 'china',
// height: 5.2
// }]
// }]
}
}
},
mounted () {
// this.initData()
this.initMap()
this.getMapJson()
},
methods: {
initMap () {
// 1. 创建地图实例
var map = initMap({
id: this.id,
tilt: 80,
heading: -45.3,
center: [114.894943, 25.789724], // 中心
style: this.options.bmap.mapStyle,
zoom: 12 // 缩放
})
// 2. 创建MapVGL图层管理器
// View(options)
// map：地图对象，mapType：默认3D百度地图，支持2d地图，cesium地图，effect: 图像后处理效果
var view = new mapvgl.View({
map: map
})
// 3. 添加点图层
var layer = new mapvgl.PointLayer({
color: 'rgba(50, 50, 200, 1)',
blend: 'lighter',
size: 2
})
view.addLayer(layer)
// 4. 准备好规范化坐标数据
var data = [{
geometry: {
type: 'POINT',
coordinates: [116.403748, 39.915055]
}
}]
// 5. 关联图层与数据，享受震撼的可视化效果
layer.setData(data)
},
getMapJson () {
fetchGeojson('rjxq').then(res => {
let data = res
// debugger
console.log(data)
})
},
initData () {
const _div = document.getElementById(this.id)
this.$nextTick(() => {
let _this = this
MP('QL9aqGNjgcRAGkt6F0BrsVmfGGOgjVyr').then(BMap => {
let myChart = _this.$echarts.init(_div)
myChart.setOption(_this.options)
})
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.router-view{
top:0px !important;
}
.container{
top:0px !important;
background: url("../../assets/images/background1.jpg") no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-color: black;
.example-row{
width:100%;
height:300px;
display: flex;
justify-content: space-between;
.example-block{
width:300px;
height: 100%;
/*height:100px;*/
padding: 0.1rem;
}
}
}
</style>
