Leaflet Visual Platform Setup

Leaflet-viz

Leaflet Visualization Platform

Https://github.com/zrysmt/leaflet-viz

Leaflet is an open source front-end map interaction class library, relatively lightweight, support mobile end. And there is a wealth of plug-in resources available for us to use.

Echarts is Baidu open source front-end visualization class library, providing rich front-end visualization chart, the important part of the platform is that we want to combine leaflet and echarts.

The platform is a convenient and usable visualization platform based on leaflet and its plug-ins. See [Sample Demo] in detail. (https://zrysmt.github.io/demo/leaflet-demo/) 1. Installation and compiling installation

NPM Install

compiling

Debug Mode

NPM Run Dev

Output

NPM Run Build

2. Introduction to the sample

Example Address: https://zrysmt.github.io/demo/leaflet-demo/

Examples include the most basic GIS features and visual demo 3. Basic GIS function drag and drop, full map, positioning, print out pictures, print out PDF function.
Map scaling, scale display function to measure area and distance function layer switch, provide rich layer switch
Map search function Basic Drawing function
4. Visualization Sample

- Thermal Diagram

Introduced:

Import '.. /common/leaflet-plugin/heatlayer.js ';

Use:

var heat = L.heatlayer ([
    [50.5, 30.5, 0.2],/lat, LNG, intensity
    [50.6, 30.4, 0.5],
...
], {radius:25}) . AddTo (map)

Effect Chart :

- Combine Echarts

Let overlay = new L.echartslayer3 (map, echarts);
Let Chartscontainer = Overlay.getechartscontainer ();
Let MyChart = Overlay.initecharts (Chartscontainer);
Window.onresize = mychart.onresize;
Console.log ("Chartscontainer:", Chartscontainer);
if (type = = "Qianxi") {
    overlay.setoption (ecoption);
} else if (type = = "Scatter") {
    overlay.setoption ( scatteroption);
}

Migration Map (selection of the satellite map of the Gould)

Scatter Chart (selected Geoq midnight Blue Bottom chart)

- Divicon Combined Echarts

This scheme is not suitable for large amount of data rendering.
I wrote two simple functional functions, one for rendering the visualization (Echartsicon), and one for rendering the legend (Echartslegend).
effect Drawing (bottom chart selected for Google bottom)

Import Echartsicon from '. /common/plugin/echartsicon.js '; Echartslegend
import echartslegend from '. /common/plugin/echartslegend.js '; Echartslegend

Let option = {tooltip: {trigger: ' item ', formatter: ' {A} <br/>{b}: {C} ({d}%) '}, Ser 
            IES: [{name: ' Access source ', type: ' Pie ', radius: ' 55% ', center: [' 50% ', ' 50% '], Label: {
            Normal: {show:false}, emphasis: {Show:false }, Lableline: {normal: {show:false}, EMP
                Hasis: {Show:false}}, ItemStyle: {emphasis: {
        Shadowblur:10, shadowoffsetx:0, Shadowcolor: ' Rgba (0, 0, 0, 0.5) '}
}
    }]
};
The latitude can not be the same let latlngs = [[30, 104], [31, 110], [34, 120]]; Option.datas = [[{value:335, Name: ' Direct Access '}, {value:310, name: ' Mail Marketing '}, {value:234, n
       AME: ' affiliate AD '}, {value:135, Name: ' Video ads '}, {value:1548, Name: ' Search Engine '}], [{value:345, Name: ' Direct Access '}, {value:410, name: ' Mail Marketing '},
    {value:244, Name: ' affiliate AD '}, {value:145, Name: ' Video ad '}, {value:548, Name: ' Search Engine '}],
        [{value:445, Name: ' Direct Access '}, {value:410, name: ' Mail Marketing '}, {value:244, Name: ' affiliate AD '},
{value:145, Name: ' Video ad '}, {value:148, Name: ' Search engine '}];
Echartsicon (map, latlngs, option); Legend Let legendoption = {orient: ' vertical ', left: ' Left ', Width: "90px", Height: "140px", Data: [' Direct
Access ', ' mail marketing ', ' affiliate ads ', ' video ads ', ' Search Engines ']}; Echartslegend (map, legendoption);

Leaflet-dvf

LEAFLET-DVF is a leaflet-based data visualization framework that provides more visual graphics.

Import ".. /common/leaflet-plugin/leaflet.dvf/css/dvf.css ";
Import "LEAFLET-DVF";

earthquake map:

Income Level chart:

The data you need

Import Earthquakesdata from '. /data/earthquakes.json ';
Import Countrydata from '. /data/countrydata.js ';

Seismic Map Code:

 Let Lastlayer; Let Eqfeed_callback = function (data) {//Initialize framework linear functions for mapping earthquake data Properti Es to leaflet style properties//Color Scale-green to red using the basic hslhuefunction let MAGNITUDECOLORFU  Nction = new L.hslhuefunction (new L.point (0), new L.point (0), {outputsaturation: ' 100% ', outputluminosity: ' 25% ',
     Postprocess:null}); Let magnitudefillcolorfunction = new L.hslhuefunction (new L.point (0), new L.point (0), {outputsaturation: ' 100% ',
     Outputluminosity: ' 50% ', postprocess:null});

     Let magnituderadiusfunction = new L.linearfunction (new L.point (0), New L.point (a), {postprocess:null});
     Let-now = Math.Round (New Date ()). GetTime ());

     let start = now-86400000; Initialize a linear function to map earthquake time to opacity let timeopacityfunction = new L.linearfunction (new
     L.point (start, 0.3), New L.point (now, 1)); Let fontsizefunction = new L.LINEARFUNction (New L.point (0, 8), New L.point (10, 24)); Let textfunction = function (value) {return {text:value, style: {' F
     Ont-size ': Fontsizefunction.evaluate (value)};

     }; Setup A new data layer let DataLayer = new L.datalayer (data, {recordsfield: ' Features ', Latitud Efield: ' Geometry.coordinates.1 ', Longitudefield: ' geometry.coordinates.0 ', Locationmode:l.locationmode
                 S.LATLNG, displayoptions: {' Properties.mag ': {displayName: ' magnitude ', Color:magnitudecolorfunction, Fillcolor:magnitudefillcolorfunction, Radius:magnitude Radiusfunction, text:textfunction}, ' properties.time ': {dis
               Playname: ' Time ', opacity:timeopacityfunction, Fillopacity:timeopacityfunction,  Displaytext:function (value) {return Moment.unix (value/1000). Format (' Mm/dd/yy hh:mm ');
             }}, Layeroptions: {numberofsides:4, radius:10, Weight:1, color: ' #000 ', opacity:0.2, Stroke:true, Fillop
             acity:0.7, Dropshadow:true, gradient:true}, Tooltipoptions: {  Iconsize:new L.point (in),//hover box size iconanchor:new l.point ( -4,)}, Oneachrecord:

             function (layer, record, location) {Let $html = $ (l.htmlutils.buildtable (record)); Layer.bindpopup ($html. Wrap (' <div/> '). Parent (). HTML (), {minwidth:400, maxwidth:4
         00});

     }
     });

     ADD the data layer to the map Map.addlayer (DataLayer);
 Lastlayer = DataLayer;

 }; This.mapsetting ();
 if (Lastlayer) {map.removelayer (Lastlayer);
 } console.log ("Earthquakesdata:", earthquakesdata);
 Eqfeed_callback (Earthquakesdata)

Revenue Level Chart code:

Let incomeleveltypes = [' OEC ', ' NOC ', ' UMC ', ' MIC ', ' LMC ', ' LIC ', ' HPC ']; Let ValueArray = [{"id": "hic", "value": "High Income (HIC)"}, {"id": "HPC", "value": "grossly insufficient revenue (HIPC)}"}, {"id": "INX", "Valu E ": Unclassified (INX)"}, {"id": "LIC", "Value": "Low Income (LIC)"}, {"id": "LMC", "Value": "Medium Down (LMC)"}, {"id": "Lmy", "Val UE ": Middle and Low income"}, {"id": "Mic", "Value": "Medium Income (MIC)"}, {"id": "NOC", "Value": "High Revenue: Nonoecd (NOC)}, {" id ":" OEC "," V
Alue ": High Income: OECD (OEC)"}, {"id": "UMC", "Value": "Medium bias (UMC)"}];
    Let Getmap = function (valueArray) {let map = {};

        for (Let index = 0; index < valuearray.length; ++index) {Let value = Valuearray[index];
    map[value[' id ']] = value[' value '];
} return map;

};

Let ValueMap = Getmap (ValueArray);

Let Incomeleveltotext = function (value) {return valuemap[incomeleveltypes[value]]; Let ColorFunction1 = new L.hslluminosityfunction (new L.point (0, 0.2), New L.point (Incomeleveltypes.length-1, 0.75), {OU tputhue:0, outputluminosity: ' 100% '}); Let FillColorFunction1 = new L.hslluminosityfunction (new L.point (0, 0.5), new L.point (Incomeleveltypes.length-1, 1), {O

utputhue:0, outputluminosity: ' 100% '}); Let styles = new L.stylesbuilder (incomeleveltypes, {displayname:incomeleveltotext, Color:colorfunction1, fi

Llcolor:fillcolorfunction1});  Let options = {recordsfield: ' 1 ', Locationmode:l.locationmodes.country, Codefield: ' id ', displayoptions:
    {' incomelevel.id ': {displayName: ' Income level ', Styles:styles.getStyles ()}}, Layeroptions: {fillopacity:0.7, opacity:1, weight:1}, Tooltipoptions: {ico
        Nsize:new L.point (MB), Iconanchor:new L.point ( -5)}, Oneachrecord:function (layer, record) {

        Let $html = $ (l.htmlutils.buildtable);
         Layer.bindpopup ($html. Wrap (' <div/> '). Parent (). HTML (), {maxwidth:400,   MINWIDTH:400});

}
};

Let Incomelayer = new L.choroplethdatalayer (incomelevels, Options);

Let Legendcontrol = new L.control.legend ();
Legendcontrol.addto (map); Map.addlayer (Incomelayer);

5.GeoJSON

Suppose we need to make a map of our own and then load it into the platform. This time can use us to provide the edit bar, edit will get the coordinates, the coordinates into Geojson data stored in the database, the next time the load analysis can be.
You can also use GIS tools to make Geojson data, and then load it using the following method, detailing the delivery gate here, of course this includes mapserver things, which we will have a brief description in Part VI.
Example diagram:

Introducing Data:

Import {Json_china} from ' ... /data/china.js ';

function pop_0 (feature, layer) {//part has omitted let popupcontent = ' <table>\ <tr>\ &LT;TD colspan= "2" > Size: ' + (feature.properties[' area ']!== null?
                    Autolinker.link (String (feature.properties[' area ')): ') + ' </td>\ </tr>\ <tr>\ <td colspan= "2" > Perimeter: ' + (feature.properties[' PERIMETER ']!== null?
                    Autolinker.link (String (feature.properties[' PERIMETER ')): ') + ' </td>\ </tr>\ <tr>\ <td colspan= "2" > Name: ' + (feature.properties[' name ']!== null?
                Autolinker.link (String (feature.properties[' NAME ')): ') + ' </td>\ </tr>\
    </table> ';
Layer.bindpopup (popupcontent); function Style_0 () {return {pane: ' Pane_0 ', opacity:1, Color: ' Rgba (0,0,0,0.494117647059
 ) ', Dasharray: ',       LineCap: ' Butt ', LineJoin: ' miter ', weight:1.0, Fillopacity:1, FillColor: ' Rgba (6
4,98,210,0.494117647059) ',} map.createpane (' Pane_0 ');
Map.getpane (' Pane_0 '). Style.zindex = 400;
Map.getpane (' Pane_0 '). style[' mix-blend-mode ' = ' normal '; Let layer_0 = new L.geojson (Json_china, {attribution: ' <a href= ' "></a> ', pane: ' Pane_0 ', ONEACHFE Ature:pop_0, style:style_0});

6.MapServer

Further, if we want our own map server, this time we need to use the MapServer, the specific instructions see the Portal

There is an example under the Test folder: leaflet-mapserver.html. Note that this is a need to configure the server, where direct preview is not successful.
Sample gets our map server for the world map.

In fact, leaflet and D3 and other open source library together, can get a lot of colorful visual map, leaving a little mystery, here will no longer explore the combination of the magical charm.