高德地图API之边界墙效果

// 引入自定义的类
import {WallLayer} from './WallLayer'

window.forceWebGL = true; // 强制启动WebGL
// window.forceWebGLBaseRender = true; // 开启GL
window._AMapSecurityConfig = { // 加载密钥
    serviceHost:'xxx'
}    
 // 使用API加载高德地图
AMapLoader.load({
    "key": "xxx",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": ['Map3D','AMap.DistrictSearch','AMap.DistrictLayer'],  // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '2.0'  // Loca 版本，缺省 1.3.2
    },
}).then((AMap)=>{
    let pitch=50;
    // 加载地图
    mainmap=window.mainmap=new AMap.Map('mapContainer',{
            mapStyle: 'amap://styles/xxx', //设置地图的显示样式
            center:[119.978873,30.273852], // 设置中心
            zoom:11,
            viewMode:'3D',
            pitch:pitch,
            showBuildingBlock:true, // 显示3D楼宇
            skyColor:'', // 天空颜色
    });

    // 保存地图
    store.commit("setMap",markRaw(mainmap));
    store.commit("setMapComplated",true);

    new WallLayer([120.002, 30.355],3000);
    // 绘制影响范围
    let eventCircle = new AMap.Circle({
        center: [120.002, 30.355],
        radius: 3000, //半径
        borderWeight: 3,
        strokeColor: "#FF33FF", 
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10], 
        // 线样式还支持 'dashed'
        fillColor: '#1791fc',
        zIndex: 5,
    })
    // 添加到地图上
    eventCircle.setMap(mainmap);

}).catch(e => {
    console.log(e);
});