vue结合高德地图 vue-amap 实现只显示一个省，地图截图

作者: 东扯葫芦西扯瓜 | 来源:发表于2020-11-29 13:24 被阅读0次

vue结合高德地图 vue-amap 实现只显示一个省，地图截图
【VUE】常用插件
vue-amap(vue 地图)
vue调用高德地图：vue-amap
高德地图中展示多个视频窗格
quasar上高德地图vue-amap组件应用攻略：基础篇
vue-amap使用案例——高德地图多组可切换点坐标
vue-高德地图实现定位
关于高德地图vue-amap
高德地图-地图截屏

奇葩需求！！
非要地图只显示一个省，又不喜欢用echarts绘制的那种。就是要地图，然后截出一个省出来。
无论是高德地图，还是百度地图，貌似都没直接提供这种功能哦~~
折腾了好久终于找到实现方法！
可谓思路不对，努力白费！

思路就是：查出想要显示的省或市的轮廓经纬度，然后在遥远的地方弄4个点的经纬度（因为地球是圆的），然后把这四个点的经纬度和目标城市的轮廓经纬度放在一起，绘制一个很大很大的覆盖物，地球是圆的，你可以自己想象一下这个覆盖物的样子，这样你看到的地方就只有目标地图显示了，其他地方均被遮盖
其实关键代码就下面这点：

  //绘制遮罩，显示某个省
            drawBounds(map) {
                //加载行政区划插件
                let opts = {
                    subdistrict: 0,   //获取边界不需要返回下级行政区
                    extensions: 'all',  //返回行政区边界坐标组等具体信息
                    level: 'city'  //查询行政级别为 市
                }
                let district = new AMap.DistrictSearch(opts)
                let polygons=[]
                district.setLevel('湖南省')
                district.search("湖南省", (status, result)=> {
                    map.remove(polygons)//清除上次结果
                    polygons = [];
                    let bounds = result.districtList[0].boundaries;
                    if (bounds) {
                        for (let i = 0, l = bounds.length; i < l; i++) {
                            //生成行政区划polygon
                            let polygon = new AMap.Polygon({
                                strokeWeight: 1,
                                path: bounds[i],
                                fillOpacity: 0.4,
                                fillColor: '#ffffff',
                                strokeColor: '#0A1A29'
                            });
                            polygons.push(polygon);
                        }
                    }
                    map.add(polygons)
                    map.setFitView(polygons);//视口自适应
                    let outer = [
                        new AMap.LngLat(-360,90,true),
                        new AMap.LngLat(-360,-90,true),
                        new AMap.LngLat(360,-90,true),
                        new AMap.LngLat(360,90,true),
                    ]
                    let holes = result.districtList[0].boundaries

                    let pathArray = [
                        outer
                    ]
                    pathArray.push.apply(pathArray,holes)
                    let polygon = new AMap.Polygon( {
                        pathL:pathArray,
                        //线条颜色，使用16进制颜色代码赋值。默认值为#006600
                        // strokeColor: 'rgb(20,164,173)',
                        strokeColor:"#001826",
                        strokeWeight: 1,
                        //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
                        strokeOpacity:0.5,
                        //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
                        fillColor: '#ffffff',
                        //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
                        fillOpacity: 1,
                        //轮廓线样式，实线:solid，虚线:dashed
                        strokeStyle:'dashed',
                        /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
                          ie9+浏览器有效 取值：
                          实线：[0,0,0]
                          虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
                          点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
                          线和10个像素的空白 （如此反复）组成的虚线*/
                        strokeDasharray:[10,2,10]
                    });
                    polygon.setPath(pathArray)
                    map.add(polygon)
                })
            }

本人使用了vue-amap，下面来看看完整代码：
创建项目就不说了，vue-cli3创建的项目，然后下载vue-amap，申请好你的高德地图Key
main.js

import Vue from 'vue'
import App from './app'
import router from './router'
import store from './store'
import VueAMap from 'vue-amap'; // 高德地图
import {AMapKey} from './utils/const-datas'//高德地图key

Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
    key:AMapKey,
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', 'AMap.DistrictSearch'],
    v: '1.4.4',
    uiVersion: '1.0.11', // 版本号
})

Vue.config.productionTip = false
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

新建 amap.vue，写地图相关代码
template

<template>
    <div class="amapBox">
        <el-amap class="amap-box" :vid="'hunan-amap'" :plugin="plugin" :center="mapCenter" :events="events" ref="map" :amap-manager="amapManager"  mapStyle="light">
            <el-amap-marker  v-for="(marker, index) in geoCoordMap"
                             :icon="require('../../assets/images/mapMark.png')"
                             :position="marker.latLon"
                             :events="{
                            click:e=>chartScatterMapClick(marker),
                            mouseover:()=>markerMouseOver(marker,index),
                            mouseout:()=>markerMouseOut(marker,index),
                        }"
                             :visible="marker.visible"
                             :draggable="marker.draggable"
                             :vid="index"
                             :label="{content:`<div style='padding:10px;'><p style='margin-bottom:10px;' class='gray999'>${marker.name}</p><strong class='violet'>${marker.address}</strong></div>`,offset: [30, (markerDatas[index] && (typeof markerDatas[index].offsetY==='number')) ? markerDatas[index].offsetY :  -1000000]}"
            >
            </el-amap-marker>
        </el-amap>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import { AMapManager } from 'vue-amap'
    import { lazyAMapApiLoaderInstance } from 'vue-amap'
    export default {
        name: 'AMap',
        data() {
            return {
                mapCenter: [112.993977,28.133938],//地图中心
                events: {
                    init:this.mapInit,
                    'moveend': this.moveend,
                },//地图事件
                plugin: [
                    'Scale','OverView','DistrictSearch',{
                        pName: 'ToolBar',
                        events: {
                            init(instance) {
                                // //console.log(instance);
                            }
                        },
                        position:'RT'
                    }
                ],//地图差距
                amapManager:new AMapManager(),
                map:null,//地图实例
                locationImg:require('../../assets/images/mapMark.png'),//标记图片
                markerDatas:[],//存储标标记相关数据
                geoCoordMap:[],//地图红点标记数据
            }
        },
        mounted(){
        this.getGeoCoordMap()
        }
        methods: {
        //获取地图红点标记数据
        getGeoCoordMap(){
        },
            // 地图初始化函数
            mapInit(o){
                o.setMapStyle('amap://styles/54555a5s5as4d5as4d5a154s');//自定义的高德地图的样式
                setTimeout(()=>{
                   this.drawBounds(o)
                },200)
            },
            // //标记点鼠标移入事件
            markerMouseOver(marker,index){
                for(let i=0;i<index;i++){
                    this.markerDatas.push('')
                }
                this.markerDatas.splice(index,1,{
                    offsetY:0
                })
                // //console.log(this.markerDatas)
            },
            //标记点鼠标移出事件
            markerMouseOut(marker,index){
                this.markerDatas.splice(0)
            },
            //地图红点点击
            async chartScatterMapClick(marker){
              //点击标记点相关操作
            },
            //绘制遮罩，显示某个省
            drawBounds(map) {
                //加载行政区划插件
                let opts = {
                    subdistrict: 0,   //获取边界不需要返回下级行政区
                    extensions: 'all',  //返回行政区边界坐标组等具体信息
                    level: 'city'  //查询行政级别为 市
                }
                let district = new AMap.DistrictSearch(opts)
                let polygons=[]
                district.setLevel('湖南省')
                district.search("湖南省", (status, result)=> {
                    map.remove(polygons)//清除上次结果
                    polygons = [];
                    let bounds = result.districtList[0].boundaries;
                    if (bounds) {
                        for (let i = 0, l = bounds.length; i < l; i++) {
                            //生成行政区划polygon
                            let polygon = new AMap.Polygon({
                                strokeWeight: 1,
                                path: bounds[i],
                                fillOpacity: 0.4,
                                fillColor: '#ffffff',
                                strokeColor: '#0A1A29'
                            });
                            polygons.push(polygon);
                        }
                    }
                    map.add(polygons)
                    map.setFitView(polygons);//视口自适应
                    //那遥远的四个点在这
                    let outer = [
                        new AMap.LngLat(-360,90,true),
                        new AMap.LngLat(-360,-90,true),
                        new AMap.LngLat(360,-90,true),
                        new AMap.LngLat(360,90,true),
                    ]
                    let holes = result.districtList[0].boundaries

                    let pathArray = [
                        outer
                    ]
                    pathArray.push.apply(pathArray,holes)
                    let polygon = new AMap.Polygon( {
                        pathL:pathArray,
                        //线条颜色，使用16进制颜色代码赋值。默认值为#006600
                        // strokeColor: 'rgb(20,164,173)',
                        strokeColor:"#001826",
                        strokeWeight: 1,
                        //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
                        strokeOpacity:0.5,
                        //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
                        fillColor: '#ffffff',
                        //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
                        fillOpacity: 1,
                        //轮廓线样式，实线:solid，虚线:dashed
                        strokeStyle:'dashed',
                        /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
                          ie9+浏览器有效 取值：
                          实线：[0,0,0]
                          虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
                          点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
                          线和10个像素的空白 （如此反复）组成的虚线*/
                        strokeDasharray:[10,2,10]
                    });
                    polygon.setPath(pathArray)
                    map.add(polygon)
                })
            }
        },
    }
</script>

css

<style scoped lang="scss">
    .amapBox{
        width:100%;
        height:100%;
    }
</style>
<style>
    .amap-marker-label{
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        border:none;
        -webkit-box-shadow:  1px 2px 4px #cccccc;
        -moz-box-shadow:  1px 2px 4px #cccccc;
        box-shadow:   1px 2px 4px #cccccc;
    }
</style>

参考文章：https://blog.csdn.net/liujucai/article/details/100070540

vue结合高德地图 vue-amap 实现只显示一个省，地图截图
奇葩需求！！非要地图只显示一个省，又不喜欢用echarts绘制的那种。就是要地图，然后截出一个省出来。无论是高德地...
【VUE】常用插件
图片懒加载 vue-lazyloadecharts图标 vue-echarts高德地图 vue-amap日期...
vue-amap(vue 地图)
昨天把vue的地图（高德）搞了下：步骤：1.去高德开发者平台申请key；2.安装vue-amap；3.使用组件调...
vue调用高德地图：vue-amap
前言：之前没有接触过页面调用地图的项目，某次面试，老板要求我用vue-amap调用高德地图，回家以后，我去网上查了...
高德地图中展示多个视频窗格
高德地图中展示多个视频窗格，视频与地图中的摄像头用线连接效果展示：用到的组件有vue-amap地址：https:...
quasar上高德地图vue-amap组件应用攻略：基础篇
在quasar应用中以电子地图作为主界面是一种很好的交互界面探索，笔者选用高德地图的vue-amap组件，具体原因...
vue-amap使用案例——高德地图多组可切换点坐标
vue-amap | 基于 Vue 2.x 与高德的地图组件 //参加比赛的时的一个需求，当时时间比较紧，代码很烂...
vue-高德地图实现定位
在仿马蜂窝的小项目中有个模块需要定位用户的当前位置，所以我打算使用高德地图的vue-amap插件实现功能。首页...
关于高德地图vue-amap
地图插件要放在event的init函数中，否则报错
高德地图-地图截屏
高德地图-地图截屏截图效果该截图只接地图部分，不会截到地图上的定位、比例尺、指南针等按钮。