关于javascript:ArcGIS-for-JS-argis地图限制显示不规则区域

ArcGIS for JS argis 地图限度显示不规则区域

   dojoRequire(["esri/map", 
    "esri/geometry/Point",
    "esri/layers/ImageParameters",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/GraphicsLayer", ], (Map, Point, ImageParameters, ArcGISDynamicMapServiceLayer,GraphicsLayer) => {
          

    // 办法一
   var    map = new Map("map", {
        basemap: "satellite", 
        center: [113.36112, 23.12467],
        zoom: 11,
    });
        
           
    var imageParameters = new ImageParameters();
    imageParameters.format = "PNG24";
    var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer", {
      "opacity"        :1.0,
      "imageParameters":imageParameters
    });
    map.addLayer(dynamicMapServiceLayer);


    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    canvas.width = width
    canvas.height = height
    context.fillStyle="#fff";
    context.fillRect(0,0,width,height);
    axios.get(`/borderAll/test.json`).then(function (gzJson) {
            var data=gzJson.data;
            context.globalCompositeOperation='destination-out';
            for (var item of data) {var [lon, lat] = item
                var [left,top] = this.lngLat2Vector2(lon,lat)
                context.lineTo(left, top);
            }

            context.fillStyle="green";
            context.fill();}.bind(this)
    );
    
})

<div>
             <div id='map' style={{height:window.innerHeight-50,width:'100%',position:'relative'}}></div>
             <canvas id="myCanvas" className='shadediv' />
        </div>

test.json 为不规则门路的边界经纬度