LiuJi-Jim / amap-vue

Using AMap with Vue in an easy way.
https://liuji-jim.github.io/amap-vue/
68 stars 6 forks source link

地图掩模异步获取如何在amap组件上绘制? #17

Open wzx-3015 opened 3 years ago

wzx-3015 commented 3 years ago

await loadPlugins(['AMap.DistrictSearch'])

const opts = {
  subdistrict: 0,
  extensions: 'all',
  level: 'city',
}

const district = new AMap.DistrictSearch(opts)

console.log(district)

district.search('北京市', (status, result) => {
  if (result.info === 'OK') {
    const bounds = result.districtList[0].boundaries
    // let mask = bounds.map(v => [v])

    this.amap.mask = bounds.map(v => [v])

    // new Map('container', {
    //   mask: mask,
    //   center: [116.472804, 39.995725],
    //   viewMode: '3D',
    //   showLabel: false,
    //   labelzIndex: 130,
    //   pitch: 40,
    //   zoom: 9,
    //   layers: [
    //     new AMap.TileLayer.RoadNet({
    //       // rejectMapMask:true
    //     }),
    //     new AMap.TileLayer.Satellite(),
    //   ],
    // })
    // let maskerIn = new AMap.Marker({
    //   position: [116.501415, 39.926055],
    //   map: map,
    // })
    // let maskerOut = new AMap.Marker({// 区域外的不会显示
    //   position: [117.001415, 39.926055],
    //   map: map,
    // })
    // // 添加描边
    // for (var i = 0; i < bounds.length; i += 1) {
    //   new AMap.Polyline({
    //     path: bounds[i],
    //     strokeColor: '#99ffff',
    //     strokeWeight: 4,
    //     map: map,
    //   })
    // }

    // for(var i = 0; i < bounds.length; i+=1){
    //     mask.push([bounds[i]])
    // }
  } else {
    console.warn('AMap.DistrictSearch  查询错误!')
  }
})
LiuJi-Jim commented 3 years ago

据我了解,目前地图仅支持在初始化参数中设置mask,不支持后期修改。

wzx-3015 commented 3 years ago

是的 但是异步给mask设置值的 amap组件没有响应