高德地图按行政区划分填充色块

实现的效果：

项目地址：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=thisif (!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', // defaultbaseURL: '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=thisconst code = 630000;//青海省代码const dep = 1;  //按市区划分var disProvince=this.disProvincesdisProvince && 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// adcodevar 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=thisMap.setFeatures(_that.depFeatures);},test(){this.setFeature(this.map)}}
}
</script>
<style lang='less' scoped>
.container {height: 100%;
}
</style>

高德地图按行政区划分填充色块相关推荐

H5数据可视化(高德地图绘制行政区)
1.高德地图可视化项目搭建参考我的上篇文章完成基本搭建:H5数据可视化(高德地图构建项目) 2.使用高德行政区查询该部分主要参照官方教程即可,其中使用行政区划查询服务前要先引入该插件,具体的引入方 ...
vue高德地图绘制行政区边界
<template><div id="gaodeMap"></div> </template><script>impor ...
高德地图获取行政区一直报no_data
代码 let that = this this.map = new AMap.Map('container', {zoom: 20, // 级别center: [120.26, 30.18], // ...
VUE2.0实现高德地图选择地点后进行行政区边界划分
最终效果图: 最终效果达到选择全部就描绘当前级联选择框下面的所有行政区,第二级开始描绘上一层加当前所有行政区预备知识: vue2.0.组件间传值.高德地图API(提前去高德地图提供的服务处申请好ke ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
根据经纬度确定行政区域_基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标...
前言近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GP ...
JS如何在高德地图多边形覆盖物填充平行折线的算法
需求:在多边形覆盖物中填充折线实现第一步: 用JS封装一个对象或者采用ES6的Class写法,并将地图经纬度转成坐标点 class ScanFill {allPoints = [] // 存多边形 ...
vue高德地图省市区，区域划分。district.search 一直报no_data
写完后会发现有报错 // 创建地图renderBmap() {this.bmap = new AMap.Map("container", {resizeEnable: true, ...
java aoi 服务器地图_GitHub - WanZixin/getShp: 利用高德地图web服务API获取坐标串，生成行政区和aoi的shp文件...
爬取数据生成shp文件 1.功能简介共有两大功能,一个功能是根据高德地图web服务API获取行政区划坐标串,写入行政区shp文件:另一个功能是根据高德地图的接口获取poi坐标串,写入aoi(area ...

高德地图按行政区划分填充色块

高德地图按行政区划分填充色块相关推荐

最新文章

热门文章