uniapp 区域地图

刺骨的言语ヽ痛彻心扉 2022-09-02 12:54 367阅读 0赞

<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>