vue高德地图区域掩模,自定义掩膜

1.因为高德地图只能定义到市级,我只需要某个地方的区域掩膜。,高德给的api听清楚的

自定义的mask里面的数组是我自己用地图吸取一个一个点的,暂时我还没有好的解决办法   拾取链接 https://lbs.amap.com/console/show/picker

<template>
    <div style="width: 100%;height: 100%;">
    </div>
</template>

<script>
    export default {
    data() {
      return {
          
      }
    },
       mounted: function() {
            var opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
    };
    //利用行政区查询获取边界构建mask路径
    //也可以直接通过经纬度构建mask路径
    var district = new AMap.DistrictSearch(opts);

//引号里面是可以填写到市县级别 这样就不需要mask了
    district.search('', function(status, result) {
        var bounds = result.districtList[0].boundaries;
        var mask =  [
                
                  [121.919593,31.579758],
                [121.951522,31.554455],
                [121.964397,31.544069],
                
                
                [121.963882,31.54246],
                [121.96577,31.542313],
                [121.98534,31.517878],
                [121.99049,31.501487],
                [121.990833,31.493583],
                [121.98019,31.471331],
                [121.970233,31.466792],
                [121.941394,31.457568],
                
                [121.91616,31.447317],
                [121.899166,31.445706],
                [121.888523,31.438823],
                [121.870327,31.437211],
                [121.87067,31.439115],
                [121.887836,31.440727],
                [121.891784,31.448635],
                [121.904831,31.447463],
                
                [121.930236,31.460496],
                [121.925773,31.463425],
                [121.959419,31.510268],
                [121.960535,31.540558],
                [121.960449,31.540338],
                 [121.942939,31.553797],
                 [121.931352,31.566523],
                [121.924228,31.571715],
                [121.916332,31.575664],
                [121.915302,31.576249],
                [121.915645,31.576907],
                [121.919593,31.579758],
                
                
            ];
       /* for(var i =0;i<bounds.length;i+=1){
            mask.push([bounds[i]])
        }*/
        var map = new AMap.Map('container', {
            mask:mask,

//中心
            center:[121.95908,31.496941],
            disableSocket:true,
            viewMode:'3D',
            showLabel:false,
            labelzIndex:130,
            pitch:10,
            zoom:12.5,
            layers:[
                new AMap.TileLayer.RoadNet({
                    //rejectMapMask:true
                }),
                new AMap.TileLayer.Satellite()
            ]
        });
        var maskerIn = new AMap.Marker({
            position:[121.95908,31.496941],
            map:map
        })
        var maskerOut = new AMap.Marker({//区域外的不会显示
            position:[121.95908,31.496941],
            map:map
        })
        //添加高度面
        var object3Dlayer = new AMap.Object3DLayer({zIndex:1});
        map.add(object3Dlayer)
        var height = -8000;
        var color = '#0088ffcc';//rgba
        var wall = new AMap.Object3D.Wall({
            path:bounds,
            height:height,
            color:color
        });
        wall.transparent = true
        object3Dlayer.add(wall)
        //添加描边
        for(var i =0;i<bounds.length;i+=1){
            new AMap.Polyline({
                path:bounds[i],
                strokeColor:'#99ffff',
                strokeWeight:4,
                map:map
            })
        }
    });
}
  }
</script>

<style>
.amap-logo{
   opacity:0;
}
.amap-copyright {
    opacity:0;
}
</style>

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue高德地图区域绑定信息窗是指在Vue组件中使用高德地图API实现区域与信息窗口的绑定功能。 首先,我们需要安装并引入高德地图JavaScript API库。可以使用npm安装或者通过CDN引入。然后,在Vue组件的mounted钩子函数中初始化地图实例。 接着,我们可以通过高德地图提供的API创建区域、信息窗口,并将它们绑定在一起。首先,使用AMap.Polygon对象创建一个区域,并设置区域的坐标点。然后,使用AMap.InfoWindow对象创建一个信息窗口,并设置其内容及位置。 接下来,在Vue组件的data属性中,定义一个变量来保存区域和信息窗口的实例。然后,在初始化地图实例时,将该变量与地图实例绑定,以便在其他方法中使用。 然后,在Vue组件的methods属性中,定义一个方法来显示信息窗口。在该方法中,通过调用信息窗口实例的open方法,将信息窗口显示在指定的位置。 最后,在区域的点击事件中,调用显示信息窗口的方法,以实现点击区域时弹出相应的信息窗口。 总结起来,使用Vue高德地图区域绑定信息窗的步骤包括初始化地图实例、创建区域和信息窗口、定义变量保存实例、编写显示信息窗口的方法、设置区域的点击事件来触发显示信息窗口的方法。通过这些步骤,我们可以实现在Vue组件中使用高德地图API来绑定区域和信息窗口的功能。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值