高德地图按行政区划分填充色块
实现的效果:项目地址:https://gitee.com/ling-xu/gaud-map-vue关键代码:<template><div:id="idHash"class="container"style="z-index:1"@click="test()"/></template><script>import pin1 from '../asset
·
实现的效果:
项目地址:https://gitee.com/ling-xu/gaud-map-vue
关键代码:
<template>
<div
:id="idHash"
class="container"
style="z-index:1"
@click="test()"
/>
</template>
<script>
import pin1 from '../assets/pin1.png'
import pin2 from '../assets/pin2.png'
import pin3 from '../assets/pin3.png'
import pin4 from '../assets/pin4.png'
import pin5 from '../assets/pin5.png'
import axios from 'axios'
export default {
name: 'MapChart',
props: {
year: { type: String, default: '2021' },
zoom: { type: Number, default: 4 },
showData:{type:Boolean,default:false},
locationList:Array,//产业数据-面店分布的地图显示传入数据
getLocation:{type:Boolean,default:false}//首页-面店分布的图片显示
},
data: () => ({
loading: false,
idHash: 'MapContainer' + new Date().getTime(),
disProvinces:'',
map:{},
depFeatures: ['bg', 'road', 'building', 'point']
}),
watch: {
year() {
this.refresh()
},
locationList(){
this.refresh()
},
},
mounted() {
if (window.AMap === undefined) {
const script = document.createElement('script')
script.src = 'https://webapi.amap.com/maps?v=1.4.15&plugin=AMap.MarkerClusterer,Map3D,AMap.DistrictLayer,AMap.DistrictSearch&callback=initAMap&key=de45c1a0e7ea44bea49388cea9cca2f7'
document.head.appendChild(script)
window.initAMap = () => {
this.refresh()
}
} else {
this.refresh()
}
},
methods: {
refresh() {
let that=this
if (!window.AMap) {
return
}
const opts = {
subdistrict: 0,
extensions: 'all',
level: 'province'
};
//直接通过经纬度构建mask路径
const district = new AMap.DistrictSearch(opts);
district.search('青海省', function(status, result) {
const bounds = result.districtList[0].boundaries;
const mask = []
for(let i =0;i<bounds.length;i+=1){
mask.push([bounds[i]])
}
const Map = new AMap.Map(that.idHash, {
mask:mask,//只显示包裹起来的区域
resizeEnable: false,
center: [96.475745,35.841084],
viewMode:'3D',
// pitch:5,
zoom:that.zoom,
features: [],//初始色块模式下,不显示标注等信息
mapStyle: 'amap://styles/021981e1781074e215441507a954df4b', //设置地图的显示样式
});
that.map=Map//把这里面创建的地图对象存起来,让这个指针指向它,后续要使用
//点聚合数据处理
if(that.showData){
// 地图的数据由父组件传入
that.updateMark(Map, that.locationList)
}else if(that.getLocation){
// 首页-面店分布的图片显示
axios({
url: 'diagram/getShopDistribute2',
method: 'get', // default
baseURL: 'http://47.115.140.114:5001/api/report/',
headers: {'x-user-token': 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJiYW5rZm9ydGVzdDAwMSIsInN1YiI6ImxvZ2luLmxvZ2luIiwiaWF0IjoxNjI0NDY0MzkwLCJhdXRob3JpemF0aW9uIjp7fSwiYWFhIjoiYWFhIiwiZGVwdE5hbWUiOiLpnZLmtbfmi4npnaLkuqfkuJrnu7zlkIjmnI3liqHlubPlj7AiLCJsb2dpblRpbWUiOiIyMDIxLTA2LTI0IDAwOjA2OjMwIiwidW5pdE5hbWUiOiLpnZLmtbfmi4npnaLkuqfkuJrnu7zlkIjmnI3liqHlubPlj7AiLCJwcm92aW5jZSI6IjQ0MDAwMCIsImNpdHkiOiI0NDAxMDAiLCJ1bml0Q29kZSI6ImxhbWlhbiIsInJlZGlzVG9rZW4iOiI2NmExOTA4Yy0yYjcwLTRjYmQtYTI0ZS0xMjFiODBiZTEzMzQiLCJ0ZW5hbnRJZCI6ImxhbWlhbiIsInN0YWZmVHlwZTIiOiI0IiwiZGVwdENvZGUiOiJsYW1pYW4iLCJleHAiOjE2MjQ0NjYxOTAsInVzZXJuYW1lIjoiYmFua2ZvcnRlc3QwMDEifQ.2H3Mcjyqqmeqs2WRbfugmZQQGmzJw5cRnGDND_NKmAM'},
}).then(res => {
that.updateMark(Map, res.data.locationList)
console.log("aaa",res.data.locationList)
})
}
//按行政区填充色块
that.initPro(Map)
//按行政区描边
that.borderLine('海西蒙古族藏族自治州',Map)
that.borderLine('海东市',Map)
that.borderLine('海南藏族自治州',Map)
that.borderLine('海北藏族自治州',Map)
that.borderLine('果洛藏族自治州',Map)
that.borderLine('黄南藏族自治州',Map)
that.borderLine('玉树藏族自治州',Map)
that.borderLine('西宁市',Map)
});
},
// 创建市区的颜色块
initPro(map) {
const that=this
const code = 630000;//青海省代码
const dep = 1; //按市区划分
var disProvince=this.disProvinces
disProvince && disProvince.setMap(null);
disProvince = new AMap.DistrictLayer.Province({
zIndex: 12,
adcode: [code],
depth: dep,
styles: {
'fill': function (properties) {
// properties为可用于做样式映射的字段,包含
// NAME_CHN:中文名称
// adcode_pro
// adcode_cit
// adcode
var adcode = properties.adcode;
return that.getColorByAdcode(adcode);
},
// 'province-stroke': 'cornflowerblue',
'city-stroke': '#3078AC', // 中国地级市边界
// 'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
}
});
disProvince.setMap(map);
},
// 颜色辅助方法
getColorByAdcode(adcode) {
const colors={
630100: "#2c54cf",
630200: "#17307c",
632200: "#204699",
632300: "#1c3077",
632500: "#2b47ac",
632600: "#17307c",
632700: "#204699",
632800: "#17307c",
}
return colors[adcode];
},
/**
* 更新标记点
*/
updateMark(Map, points) {
// 位置标记
const Markers = []
for (var i = 0; i < points.length; i += 1) {
if (points[i]) {
Markers.push(new AMap.Marker({
position: points[i].split(','),
offset: new AMap.Pixel(-15, -15)
}))
}
}
let str=[{
url: pin5,
size: new AMap.Size(100, 100),
offset: new AMap.Pixel(-100, -100),
textSize:40,
textColor:'#353535'
}, {
url: pin4,
size: new AMap.Size(100, 100),
offset: new AMap.Pixel(-100, -100),
textSize:40,
textColor:'#353535'
}, {
url: pin3,
size: new AMap.Size(100, 100),
offset: new AMap.Pixel(-100, -100),
textSize:40,
textColor:'#353535'
}, {
url: pin2,
size: new AMap.Size(100, 100),
offset: new AMap.Pixel(-100, -100),
textSize:40,
textColor:'#353535'
}, {
url: pin1,
size: new AMap.Size(100, 100),
offset: new AMap.Pixel(-100, -100),
textSize:40,
textColor:'#353535'
}]
new AMap.MarkerClusterer(Map, Markers, {
styles: str,
gridSize: 60,
minClusterSize:1
})
},
//行政区描边的功能
borderLine(city,Map){
const opts = {
subdistrict: 0,
extensions: 'all',
level: 'city'
};
//直接通过经纬度构建mask路径
const district = new AMap.DistrictSearch(opts);
district.search(city, function(status, result) {
const bounds = result.districtList[0].boundaries;
//添加描边
for(let i =0;i<bounds.length;i+=1){
new AMap.Polyline({
path:bounds[i],
strokeColor:'#1a77aa',
strokeWeight:10,
map:Map
})
}
})
},
//重新给地图增加标注信息
setFeature(Map){
const _that=this
Map.setFeatures(_that.depFeatures);
},
test(){
this.setFeature(this.map)
}
}
}
</script>
<style lang='less' scoped>
.container {
height: 100%;
}
</style>
更多推荐
所有评论(0)