React component development for ArcGIS

background

Recently, a project using react was used in ArcGIS, which was very different from the previous usage, and after our research, it was found to be rare and quite fragmented, mainly on GitHub and ArcGIS for developer. This is also a step on a relatively deep pit, summed up here, I hope to help everyone. Fundamentals

The API to use ArcGIS in react may be more complicated than you might think, because ArcGIS does not provide standard react components, but relies on the federated use of multiple components such as Esri-loader-react,esri-loader.
Comrades who have time to look at this article, read the Great God's article everything is clear.
The core of the following words

The ArcGIS API for JavaScript are written in Dojo and distributed as large library of AMD modules. Unfortunately, most module loaders, including Webpack, implement the AMD ' standard ' differently than the ' the ' to s, specifically in the area of plugins. There is a Dojo loader for Webpack This tries to address those differences, but as of the time of writing it is not capable of Loading ArcGIS modules. Even once that issue are resolved, I still think you'll want to understand the workarounds below so you can decide which are The best solution for your application.

Simply put, Arcgisapi's JavaScript is based on dojo and needs to be imported through the AMD module. However, Webpack's AMD implementation is different from dojo, so there is a conflict, so we need to use a variety of strange ways to solve the conflict between the national salvation.

In this article we have adopted a scheme to create a dedicated map loading module that introduces the classes of ArcGIS through the Esriloader dojorequire.
The sample code looks like this

Import Esri-loader Import
* as Esriloader from ' Esri-loader ';
Use Dojorequire to like the Esri/map class
esriloader.dojorequire ([' Esri/map '], (map) +
  =//create map using the maps class let
  map = New Map (' Mapnode ', {
    Center: [ -118, 34.5],
    zoom:8,
    basemap: ' Dark-gray '
  })
;

Actual code

Come after me and yell, show me the code.
Encapsulating controls

Import React from ' React '; Import {Dojorequire} from ' Esri-loader ' import esriloader from ' esri-loader-react ' export default class Map extends Reac
        t.component {//Use constructor method to solve the problem of ID collision without page calling Map component constructor (props) {super (props);
        Let timestample = new Date (). GetTime ();
    This.state = {mapdivid: "Mapdiv" + timestample, Mainmap: {}};
        } render () {const mapoptions = {URL: ' http://ip:8080/arcgis_js_api/library/3.9/3.9/init.js '
        } Let flag = This.props.getShowType ();
        Let Mapstyle;
        if (flag!== "index") {//use adaptive size Mapstyle = {height: ' 400px ', Width: ' 430px '};
        } else {Mapstyle = {height: ' 100vh ', Width: ' 70vw '}; } return (<div> <esriloader options={mapoptions} ready={() = Console.ti Meend (' JSAPI Loaded ')}/> <div Id={this.state.mapdivid} sTyle={mapstyle}> </div> </div>)} componentdidmount () {

                Dojorequire ([' Esri/layers/webtiledlayer ', ' Esri/map '], (webtiledlayer, esrimap,infotemplate) = {
                    This.state.mainMap = new Esrimap (this.state.mapDivId, {autoresize:true,
                Zoom:5, maxzoom:15, center: [107.5, 27]});
                Let Thismap=this;

                  This.state.mainMap.on ("Load", function () {thisMap.state.mainMap.graphics.enableMouseEvents ();
                });
                Let Bgmapurl = ' http://ip:8080 ';
                Bgmapurl = Bgmapurl + '/webmaptileserver/map/webmap/tiles?x=${col}&y=${row}&z=${level} ';
                Tile basemap Let Basemap = new Webtiledlayer (Bgmapurl); This.state.mainMap.addLayer (basemap);//google map This.setextent ({Minlat: "Maxlat", Maxlon: "111.5", Minlon: "103.5"});

    }
        );
    } addeventcallback2layer (Layer,event, CB) {dojo.connect (layer,event, CB);
    } showinfotemplate (Info) {//Popup Infowindow this.state.mainMap.infoWindow.show ();
        } setextent (Scope) {//scope={"Minlon": "0", "Maxlon": "Ten", "Minlat": "0", "Maxlat": "10"};
        Console.info ("SetExtent"); Dojorequire (["Esri/geometry/extent"], (Extent) = {Let Extent = new Extent ({"Xmin": Parse
                Float (Scope.minlon), "ymin": parsefloat (Scope.minlat), "Xmax": parsefloat (Scope.maxlon),
                "Ymax": parsefloat (Scope.maxlat), "spatialreference": {"Wkid": 4326
            }
            });
        This.state.mainMap.setExtent (extent);


    }); }//Add layer; AddLayer (layername) {dojorequire ([' Esri/layers/graphicslayEr '], (graphicslayer) = {let layer;
                Layer = new Graphicslayer ();
                Layer.id = LayerName;
                This.state.mainMap.addLayer (layer);
            return layer;
    });
    }//clear a layer;
        Clearlayer (layername) {Let layer = This.state.mainMap.getLayer (layername);

    if (layer!== null) layer.clear ();
    } getlayer (LayerName) {return this.state.mainMap.getLayer (layername);
        }//clears all layers; Clearalllayers () {var arr = mainmap.graphicslayerids;
        Arr.foreach (layer) = {This.state.mainMap.clearLayer (layer);


    }); }////Add icon marker addmarker (data) {//Add marker to the map, such as people, devices, tasks let Locatedpoint = {"G Eometry ": {" x ": data.marker.lng,//Longitude" y ": data.marker.lat,//latitude" spatialre
        Ference ": {" Wkid ": 4326},    }, "symbol": {"url": "/style/images/" + Data.marker.type + ". png", "Heigh
                T ": data.marker.height," width ": data.marker.width," angle ": Data.marker.angle,

        "Type": "Esripms"}; Detects if the Infowindow information is set if (data.infotemplate!== null) {locatedPoint.geometry.infoTemplate = Data.info

        Template; }//New map information Dojorequire ([' Esri/graphic '], (graphic) = {Let Gra = new Grap
                HIC (locatedpoint);
                if (data.marker.attrs===undefined) data.marker.attrs={};
                Set the property if (data.marker.attrs===undefined) data.marker.attrs={};
                data.marker.attrs.graphic_id = data.marker.id;

                Gra.setattributes (Data.marker.attrs); Detects if there is a layer required to be added to the current marker, if no new layer is created let layer = This.state.mainMap.getLayer (daTa.layer);
                if (layer = = = NULL) {layer = This.state.mainMap.addLayer (data.layer);
                } return Layer.add (GRA);

            Console.log ("Bigon");


    });
    } closewindowinfo (evt) {this.state.mainMap.infoWindow.hide ();
        } showwindowinfo (evt) {this.state.mainMap.infoWindow.setContent (evt.graphic.geometry.infoTemplate.content);
    This.state.mainMap.infoWindow.show (Evt.screenpoint,this.state.mainmap.getinfowindowanchor (evt.screenpoint)); }//Draw trajectory Addpath (pathparameters) {//Get layer first, create new layer if not present let Pathlayer = This.state.mainMap.getL
        Ayer (Pathparameters.layer);
        Create path Let Linesymbol = {};
        Let S=pathparameters.from;
        Let E=pathparameters.to;
        Let Geo=[[s.x,s.y],[e.x,e.y]];
            Linesymbol.geometry = {"Paths": [Geo], "spatialreference": {"Wkid": 4326
       } };
            Linesymbol.symbol = {"Color": [255, 0, 0, 255], "width": 5, "type": "Esrisls",

        "Style": "Esrislssolid"}; Dojorequire ([' Esri/graphic '], (graphic) = {//Add path to layer Pathlayer.add (new
            Graphic (Linesymbol));


    });

 }

}

Package.json

{"Name": "Zewdemo", "Version": "1.0.0", "description": "", "Main": "Index.js", "scripts": {"test": "Echo \" "Error:no test specified\" && exit 1 "," Build ":" Webpack "," Start ":" Webpack-dev-server--host 0.0.0.0- -port 9001--colors--hot--inline--content-base./build "}," Author ":" "," License ":" ISC "," devdependencies ": {"Babel-core": "^6.26.0", "Babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "Babel-preset-react" ":" ^6.24.1 "," Css-loader ":" ^0.28.7 "," esri-loader-react ":" ^0.2.2 "," File-loader ":" ^0.11.1 "," Jsx-loade
    R ":" ^0.13.2 "," less ":" ^2.7.2 "," Less-loader ":" ^4.0.5 "," React ":" ^15.6.1 "," React-dom ":" ^15.6.1 ", "Require": "2.4.20", "Style-loader": "^0.18.2", "Url-loader": "^0.5.8", "Webpack": "^3.5.5", "webpack-dev-" Server ":" ^2.7.1 "}," dependencies ": {" bootstrap ":" ^3.3.7 "," echarts-for-react ":" ^1.4.4 "," Esri-loader " : "^0.3.0", "Esri-loAder-react ":" ^0.2.2 "," Mqtt ":" ^2.11.0 "," Rc-tree-select ":" ^1.10.7 "," React ":" ^15.6.1 "," React-bootstra P ":" ^0.31.2 "," React-bootstrap-date-time-picker ":" 0.0.3 "," react-bootstrap-table ":" ^4.0.2 "," React-date-ran GE ":" ^0.9.4 "," React-datetime ":" ^2.10.1 "," React-dom ":" ^15.6.1 "," React-echarts ":" ^0.1.1 "," react-ui-t
 Ree ":" ^3.0.0 "}}

References

1.http://tomwayson.com/2016/11/27/using-the-arcgis-api-for-javascript-in-applications-built-with-webpack/
2.https://github.com/esri/esri-loader
3.https://developers.arcgis.com/