先説需求：要想把設(shè)備在全國的分布在地圖上畫出來战授，以zoom in/out鼠標(biāo)縮放
相信很多網(wǎng)友都在找china.js 勸你別找了。
那個(gè)不能鼠標(biāo)縮放哀托，
現(xiàn)在我以在jeecg-boot項(xiàng)目(前端vue)來實(shí)驗(yàn)的兄旬，
- 先看效果
數(shù)據(jù)點(diǎn)造了2個(gè)：
[{"name":"合肥","value":[120.99,36.99]},{"name":"大慶","value":[120.01,36.01]}]
（地名隨便起的铛漓，勿對號入座）
- 去百度地圖開發(fā)者平臺去申請一個(gè)key
現(xiàn)在開發(fā)者平臺統(tǒng)一了羊异，無論是APP穆律，還是WEB床佳，都是在一個(gè)地方申請。
去里面建一個(gè)應(yīng)用恳守，它會(huì)給你生成一個(gè)key
- 聲明引用百度地圖
jeecg-boot有框架考婴，在建一個(gè)map.js中我們添加如下代碼
export function loadBMap(ak) {
return new Promise(function(resolve, reject) {
if (typeof BMap !== 'undefined') {
resolve(BMap)
return true
}
window.onBMapCallback = function() {
resolve(BMap)
}
let script = document.createElement('script')
script.type = 'text/javascript'
script.src =
'http://api.map.baidu.com/api?v=2.0&ak='+ ak +'&__ec_v__=20190126&callback=onBMapCallback'
script.onerror = reject
document.head.appendChild(script)
})
}
- 業(yè)務(wù)模塊vue
代碼如下，注意幾點(diǎn)
1）剛一進(jìn)界面催烘，可以延時(shí)再調(diào)入數(shù)據(jù)及刷新地圖
具體招數(shù): .nextTick() 或 setTimeout()
2）動(dòng)態(tài)刷新數(shù)據(jù)方法
沒找到什么好方法沥阱，只以重新init，重新加載option
為了避免提示重復(fù)創(chuàng)建對象伊群，用
if (this.chart != null && this.chart != '' && this.chart != undefined) {
this.chart.dispose()
}
判斷一下
<template>
<div class="mapContent">
<div id="china_map" :style="{ width: '1280px', height: '800px' }"></div>
</div>
</template>
<script>
//import axios from 'axios'
//import { axios } from '@/utils/request'
import { getDeviceList } from '@/api/manage'
import { loadBMap } from './map.js'
let echarts = require('echarts')
// 如果是 webpack 打包考杉，也可以 require 引入
//require('echarts');
require('echarts/extension/bmap/bmap')
var that
export default {
name: 'CnMapScatter',
components: {},
data() {
return {
deviceDataPoints: [],
chart: null,
geoCoordMap: {
青島: [120.33, 36.07],
日照: [119.46, 35.42],
膠南: [119.97, 35.88],
},
}
},
mounted() {
//vue的生命周期函數(shù)
that = this
this.$nextTick(() => {
loadBMap('在百度申請的appkey我得保密').then(() => {
//this.drawPie()
this.initEcharts() //調(diào)用初始化圖表的函數(shù)
setTimeout(() => {
window.console.log('下面準(zhǔn)備調(diào)入設(shè)備點(diǎn)')
this.loadDevicesDataPoints()
}, 2000)
})
})
},
computed: {},
methods: {
initEcharts() {
var data = [
{ name: '青島', value: 18 },
{ name: '日照', value: 21 },
{ name: '膠南', value: 22 },
]
const option = {
backgroundColor: 'transparent',
title: {
text: '設(shè)備地圖分布',
// subtext: 'data from PM25.in',
// sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff',
},
},
tooltip: {
trigger: 'item',
},
bmap: {
center: [129.114129, 31.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [
{
featureType: 'water',
elementType: 'all',
stylers: {
color: '#044161',
},
},
{
featureType: 'land',
elementType: 'all',
stylers: {
color: '#004981',
},
},
{
featureType: 'boundary',
elementType: 'geometry',
stylers: {
color: '#064f85',
},
},
{
featureType: 'railway',
elementType: 'all',
stylers: {
visibility: 'off',
},
},
{
featureType: 'highway',
elementType: 'geometry',
stylers: {
color: '#004981',
},
},
{
featureType: 'highway',
elementType: 'geometry.fill',
stylers: {
color: '#005b96',
lightness: 1,
},
},
{
featureType: 'highway',
elementType: 'labels',
stylers: {
visibility: 'off',
},
},
{
featureType: 'arterial',
elementType: 'geometry',
stylers: {
color: '#004981',
},
},
{
featureType: 'arterial',
elementType: 'geometry.fill',
stylers: {
color: '#00508b',
},
},
{
featureType: 'poi',
elementType: 'all',
stylers: {
visibility: 'off',
},
},
{
featureType: 'green',
elementType: 'all',
stylers: {
color: '#056197',
visibility: 'off',
},
},
{
featureType: 'subway',
elementType: 'all',
stylers: {
visibility: 'off',
},
},
{
featureType: 'manmade',
elementType: 'all',
stylers: {
visibility: 'off',
},
},
{
featureType: 'local',
elementType: 'all',
stylers: {
visibility: 'off',
},
},
{
featureType: 'arterial',
elementType: 'labels',
stylers: {
visibility: 'off',
},
},
{
featureType: 'boundary',
elementType: 'geometry.fill',
stylers: {
color: '#029fd4',
},
},
{
featureType: 'building',
elementType: 'all',
stylers: {
color: '#1a5787',
},
},
{
featureType: 'label',
elementType: 'all',
stylers: {
visibility: 'off',
},
},
],
},
},
series: [
// {
// name: 'pm2.5',
// type: 'scatter',
// coordinateSystem: 'bmap',
// data: that.convertData(data),
// encode: {
// value: 2,
// },
// symbolSize: function (val) {
// return val[2] / 10
// },
// label: {
// formatter: '屁使',
// position: 'right',
// },
// itemStyle: {
// color: '#ddb926',
// },
// emphasis: {
// label: {
// show: true,
// },
// },
// },
/*
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: that.convertData(
data
.sort(function (a, b) {
return b.value - a.value
})
.slice(0, 6)
),
encode: {
value: 2,
},
symbolSize: function (val) {
return val[2] / 10
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke',
},
hoverAnimation: true,
label: {
formatter: '',
position: 'right',
show: true,
},
itemStyle: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333',
},
zlevel: 1,
},
*/
{
name: 'Device',
type: 'scatter',
coordinateSystem: 'bmap',
data: this.deviceDataPoints,
encode: {
value: 2,
},
symbolSize: function (val) {
return val[2] / 10
},
label: {
formatter: '奔则',
position: 'right',
},
itemStyle: {
color: '#00ff00',
},
emphasis: {
label: {
show: true,
},
},
},
/*
{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: that.renderItem,
itemStyle: {
opacity: 0.5,
},
animation: false,
silent: true,
data: [0],
z: -10,
},
*/
],
}
if (this.chart != null && this.chart != '' && this.chart != undefined) {
this.chart.dispose()
}
that.chart = echarts.init(document.getElementById('china_map'))
that.chart.setOption(option)
},
convertData(data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i].name]
console.log('geoCoord=', JSON.stringify(geoCoord))
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
})
}
}
console.log('calc res=', JSON.stringify(res))
return res
},
loadDevicesDataPoints() {
console.log('正在調(diào)入設(shè)備點(diǎn)...')
this.deviceDataPoints = []
getDeviceList()
.then((res) => {
console.log('調(diào)入設(shè)備點(diǎn)...返回結(jié)果')
console.log('/roaddev/tdev/list response:', res)
//var res2 = []
res.result.records.map((item) => {
var loc = []
loc.push(item['devLng'])
loc.push(item['devLat'])
console.log('loc=', JSON.stringify(loc))
if (loc) {
this.deviceDataPoints.push({
name: item.devSn,
value: loc.concat(parseInt('100'))
})
}
})
console.log('deviceDataPoints =', JSON.stringify(this.deviceDataPoints))
this.initEcharts()
//return this.deviceDataPoints
})
.catch((error) => {
// catch 指請求出錯(cuò)的處理
console.log('調(diào)入設(shè)備點(diǎn)...出錯(cuò)')
console.log(error)
//return null
})
},
/*
renderItem(params, api) {
var coords = [
[116.7, 39.53],
[103.73, 36.03],
[112.91, 27.87],
[120.65, 28.01],
[119.57, 39.95],
]
var points = []
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]))
}
var color = api.visual('color')
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height,
}),
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color),
}),
}
},
*/
},
}
</script>
<style lang="less" scoped>
.mapContent {
width: 100%;
height: 100%;
.echarts {
width: 100%;
height: 100%;
}
/deep/ .showTool {
width: 160px;
height: auto;
padding: 10px 0 10px 10px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.9);
// box-shadow: 0px 2px 8px 0px rgba(13, 4, 8, 0.2);
border-radius: 5px;
.title {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 22px;
}
.rate {
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 22px;
}
}
}
</style>
結(jié)束蛮寂。點(diǎn)個(gè)贊再走唄。感謝啦易茬。
