Gaode map-region mask 2D version

Recently encountered a new need to use the high moral map

The company needs to display only the maps of a fixed area, and the maps of the rest of the places are covered with transparent masks.After
completion, the following figure is shown: At the beginning of the
map experience URL

, only one area mask in the JS API of the half-day high moral map was studied. Conditions
But the area obscuration code has a very important premise is that you must use a 3D map.
If you do n’t use a 3D map, it ’s all displayed, just draw a circle around the edge,
and then stay here for a long time.

After searching for a long time, I suddenly set the block style here and found that I can draw a circle to fill the interior through the coordinate points. Since I am thinking about whether it can be combined with the area mask and fill the outside color to achieve only display and fix Range effect

I do n’t have much to say about preparing to write. One of the troublesome things when customizing a range is that if you want to draw an area, you have to form a fence at the boundary of the area, and get it point by point. I still do n’t know where to get it, so I started by writing a demo
URL to draw the coordinates of the borders as follows:

First of all, then if not within the scope of the area you want to locate the address you want the search at the top right
and then click to draw the line

here use the left mouse button to draw form an enclosed area, click the right mouse button you will be prompted to complete the draw after the completion of

post-click prompts to complete Get all the coordinate points below. At this time, the positions of all coordinate points have been copied into the pasteboard. Find a notepad
Ctrl + V to get the array of coordinate points.
If the paste has no effect, you can look at the console control on the website f12 All the coordinate points will also be output in the stage

After obtaining the set of coordinate points, we can start writing the code

   var options = 
     {
          areas:[{ //围栏1
                //visible:false,//是否可见
                rejectTexture:true,//是否屏蔽自定义地图的纹理
                path: [[[116.316092,39.992203],
					   [116.314933,39.999798],
					   [116.31519,40.004598],
					   [116.31562,40.005255],
					   [116.316414,40.00583],
					   [116.318216,40.006258],
					   [116.318967,40.006652],
					   [116.318946,40.008214],
					   [116.3185,40.012725],
					   [116.326804,40.013267],
					   [116.328349,40.013251],
					   [116.328972,40.013152],
					   [116.330903,40.013218],
					   [116.331632,40.012955],
					   [116.335688,40.009356],
					   [116.336675,40.007729],
					   [116.336932,40.00689],
					   [116.336954,40.006841],
					   [116.337126,40.001368],
					   [116.337705,39.992869],
					   [116.325367,39.992409]]]
        }]
    };

First put the coordinate points into the array

Because our coordinate points are drawn directly, they will fill the interior, so we need to combine the code of 3D area masking, and change the internal area to the inverse selection of the external area.

 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 pathArray = [
            outer
        ];
    pathArray.push.apply(pathArray,options.areas[0].path)

Finally, only a sentence drawing method of high moral map can display the external area mask to achieve the effect of 2D area masking

 new AMap.Polygon({
        bubble:true,
        fillOpacity:0.6,
        strokeWeight:2,
		strokeColor: '#00eeff',
        fillColor: '#71B3ff',
        path:pathArray,
        map:map
    })