<template>
<view class="map-content">
<view class="map" id="map"></view>
</view>
</template>
<script>
import AMap from "../../static/js/map.js"
export default {
data() {
return {
title: 'hello',
provider: '',
map: null,
zoom: 5,
resAmap: null,
scrollH: 500,
scrollW: 500,
initLat: 38.913423, //初始维度
initLng: 116.368904, //初始经度
covers: [],
LlayAroundGroupOpen: true, //l网周边
}
},
methods: {
async initAMap() {
try {
this.resAmap = await AMap();
this.$nextTick(function() {
var SOC = 'CHN'
var colors = {};
var GDPSpeed = {
'520000': 10, //贵州
'540000': 10, //西藏
'530000': 8.5, //云南
'500000': 8.5, //重庆
'360000': 8.5, //江西
'340000': 8.0, //安徽
'510000': 7.5, //四川
'350000': 8.5, //福建
'430000': 8.0, //湖南
'420000': 7.5, //湖北
'410000': 7.5, //河南
'330000': 7.0, //浙江
'640000': 7.5, //宁夏
'650000': 7.0, //新疆
'440000': 7.0, //广东
'370000': 7.0, //山东
'450000': 7.3, //广西
'630000': 7.0, //青海
'320000': 7.0, //江苏
'140000': 6.5, //山西
'460000': 7, // 海南
'310000': 6.5, //上海
'110000': 6.5, // 北京
'130000': 6.5, // 河北
'230000': 6, // 黑龙江
'220000': 6, // 吉林
'210000': 6.5, //辽宁
'150000': 6.5, //内蒙古
'120000': 5, // 天津
'620000': 6, // 甘肃
'610000': 8.5, // 甘肃
'710000': 2.64, //台湾
'810000': 3.0, //香港
'820000': 4.7 //澳门
}
var getColorByDGP = function(adcode) {
if (!colors[adcode]) {
var gdp = GDPSpeed[adcode];
if (!gdp) {
colors[adcode] = 'rgb(227,227,227)'
} else {
var r = 0;
var g = 6;
var b = 43;
var a = gdp / 8;
colors[adcode] = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}
}
return colors[adcode]
}
var disCountry = new this.resAmap.DistrictLayer.Country({
zIndex: 10,
SOC: 'CHN',
depth: 1,
styles: {
'nation-stroke': '#ff0000',
'coastline-stroke': '#0088ff',
'province-stroke': 'grey',
'fill': function(props) {
return getColorByDGP(props.adcode_pro)
}
}
})
var map = new this.resAmap.Map("map", {
zooms: [4, 10],
center: [106.122082, 33.719192],
zoom: 4,
isHotspot: false,
defaultCursor: 'pointer',
layers: [
disCountry
],
viewMode: '2D',
resizeEnable: true
})
var styleName = "amap://styles/darkblue";
map.setMapStyle(styleName);
})
} catch (e) {
console.log(e)
}
}
},
onLoad() {
this.initAMap()
},
}
</script>
<style>
.map {
width: 100%;
height: 100vh;
}
</style>
