Custom area overlays on map components display ArcGis + GeoJson

Recently participated in an IoT environment project, the need for a certain area of a city to do environmental monitoring and governance, which used the map overlay function, rough look is very complex, in fact, very simple, first look at the effect, and then talk about how to achieve:

The middle of the yellow contour line includes a few blocks of GIS coordinates and Baidu's overlay to achieve, to simply say the steps to achieve it:

The first need to have a set of coordinates for each area, this is mainly by the engineering team construction personnel, in the local collection of coordinates, collected will generate the corresponding files to the developer

These documents are mainly as follows:

One of the files in this red box is the file that we most need, he is a SHP file, profile file, the developer needs to convert to a jsonlist, before it can be used,

So how to convert it, first of all, to have a knowledge point needs to be explained, is the coordinate system measured by the engineering team, may not be the latitude and longitude we really want to use, because the specification of different coordinate system causes the map coordinate display is not correct, so need to convert the coordinate system to GB (that is 1984)

You will need to download and install the ArcGis software, which is designed to handle the map, after installation, as below, then open ArcMap in the red box

For example, open Arctoolbox by level, a toolbox with a coordinate system conversion tool

The first use of "Define projecttion" to define a project is actually equivalent to a project in Eclipse, and then the related operations are based on the project.

For example, select a SHP file, then automatically generate his own coordinate system, after import, the default recognition

The effect after import is as follows

This time we can convert, double-click Project

The first column selects the porject that you just imported, then selects an output directory, and finally the coordinate system you want to convert, and then click OK to generate

Finally to the output directory to see, the files are in the inside

At this point, we only need to convert SHP files to the program can be recognized files, then for the program, you can identify the JSON, so, let's switch, first open http://mapshaper.org/this site, which is specifically used to convert coordinates.

First select a SHP file, which we have just generated, and import it into:

Select Export in the upper right corner, select Geojson, then download to local, then import into your own project to use

Select Export in the upper right corner, select Geojson, then download to local, then import into your own project to use, look at this JSON file:

It's actually a JSON array with coordinates in a JSON object.

The next job is to render the layer through JS.

The final effect gets a region that is rendered as follows:

This is just to intercept an array of the display, if all, but also to loop the JSON, this is omitted, the code is referenced below, which contains some Baidu map related APIs:

varChina =NewBmap.polygon ([], {strokecolor:"Orange", Strokeweight:2, strokeopacity:0.5, fillopacity:0.1, Strokestyle:"Solid", FillColor:"Red"            }); //Creating polygons$.ajax ({URL:"${ctx}/resources/module/script/dashboard/china.json", type:' GET ', Async:true}). Done (function(res) {varPointarray = Res.geometries[0].coordinates[0]; varConvertor =NewBmap.convertor (); varRealpointarray = [];  for(vari = 0; i < pointarray.length; i + +) {                    varobj =Pointarray[i]; varMapPoint =NewBmap.point (Obj[0], obj[1])                     varPointarr = [];                    Pointarr.push (MapPoint);                Realpointarray.push (MapPoint);            } china.setpath (Realpointarray); }) Map.addoverlay (China);

Custom area overlays on map components display ArcGis + GeoJson