vue 高德地图多边形 |
您所在的位置:网站首页 › vue地区选择 › vue 高德地图多边形 |
mounted() { this.$nextTick(()=>{ this.initmap(); this.init1("新疆"); }); }, initmap() { //创建地图 this.map = new AMap.Map("container", { center: [84.8779575700,45.5667333600], //设置中心点 // pitch: 60, // rotation: -35, resizeEnable: true, //是否监控地图容器尺寸变化 features: ["bg", "road", "point"], //隐藏默认楼块 mapStyle: "amap://styles/macaron", //设置地图的显示样式 // layers: [new AMap.TileLayer.Satellite()], //地图图层(卫星图层) new AMap.TileLayer() zoom: 12 //地图显示的缩放级别 }); }, init1 (city) {//区域遮盖 var that =this if( that.polygon ) { that.map.remove(that.polygon) } AMap.plugin('AMap.DistrictSearch', function () { new AMap.DistrictSearch({ extensions: 'all', subdistrict: 0 }).search(city, function(status, result) {// 外多边形坐标数组和内多边形坐标数组 var 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) ] var holes = result.districtList[0].boundaries var pathArray = [outer] pathArray.push.apply(pathArray, holes) that.polygon = new AMap.Polygon({ pathL: pathArray, strokeColor: 'red',//城市边界颜色 strokeWeight: 3, fillColor: '#5149ce', // 遮罩背景色黑色 fillOpacity: 1 }) that.polygon.setPath(pathArray) that.map.add(that.polygon) }) }) }, |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |