Collections.sort sorting two methods for list

Overview:

When I saw the map of echarts, I felt that I could do something, but I have been implemented by rice. Recently, I just used it. I studied research. I added custom Geojson data to ECharts to realize the map display of data.

Geojson data generation:

There are many ways to generate

Geojson data, and two ways are introduced here: 1. Direct conversion through GDAL; 2. Generate through Geoserver.

1, via GDAL

can be generated by GDAL for reference articlesGDAL’s Java environment configuration and convert SHP to JSON

2, via Geojson

Select Geojson in the layer preview, as shown below.

display implementation:

Implementation code is as follows:

<! Doctype html> 
 <head> 
     <meta charset = "utf-8"> 
     <Title> ECharts </Title> 
     <Style> 
         html, body,#main { 
             padding: 0px; 
             margin: 0px; 
             height: 100%; 
             overflow: hidden; 
         } 
     </style> 
 </head> 
 <body> 
 <!-Prepare a DOM--> DOM--> 
 <div ID = "main"> </div> 
 <!-Echarts single file introduction-> 
 <script src = "../../ plugin/echart/build/dist/echarts.js"> </script> 
 <script src = "../../ plugin/jquery/jquery-1.8.3.js"> </script> 
 <script type = "text/javascript"> 
     Require.config ({{ 
         Paths: { 
             echarts: '../../plugin/echart/build/dist' 
         } 
     }); 
     Require (Require ( 
             
                 'echarts', 
                 'echarts/chart/map' 
             ],,, 
             function (EC) { 
                 // Based on the prepared DOM, initialize the ECharts chart 
                 var mychart = ec.init (document.GetelementByid ('main')); 
                 varlingmap = { 
                     "China": "PROVINCE", 
                     "Provincial capital": "Capital" 
                 }; 
                 var maptype = []; 
                 var mapgeodata = request ('eCharts/Util/Mapdata/Params'); 
 for (varling in cityMap) { 
                      Maptype.push (city); 
                      // Custom extension chart type 
                      mapgeodata.params [city] = { 
                          getGeojson: (function (c) { 
                              var geojsonname = cityMap [C]; 
                              Return function (callback) {{ 
                                  $ .getjson ('Data/' + GeojsonName +'.geojson ', callback); 
                              } 
                          }) (City) 
                      } 
                 } 
                 var option = { 
                     series: [[[[[ 
                         {{ 
                             name: 'CHINA MAP', 
                             type: 'map', // map type 
                             Maptype: 'China', 
                             SelectedMode: 'Single', // Select type, 
                             Roam: TRUE, // Mouse rolling wheels 
                             HOVERABLE: false, // The mouse is highlighting 
                             itemStyle: {{ 
                                 normal: { 
                                     borderWidth: 1, 
                                     borderColor: '#cccccc', 
                                     Color: '#F3F3F3', 
                                     label: {{ 
                                         show: false, 
                                         textstyle: {{ 
                                             color: '#ff0000' 
                                         } 
                                     } 
                                 }, 
                                 EMPHASIS: {// is also selected style 
                                     borderWidth: 1, 
                                     borderColor: '#00ffff', 
                                     color: '#fffffff', 
                                     label: {{ 
                                         show: true, 
                                         textstyle: {{ 
                                             color: '#ff0000' 
                                         } 
                                     } 
                                 } 
                             }, 
                             Data: [] 
                         } 
                     ] 
                 }; 
                 // Load data for ECharts objects 
                 MyChart.setOption (Option); 
             } 
     ); 
 </script> 
 </body>

Implementation The effect is as follows:

—————————————————————————————————————

Technical blog

http://blog.csdn.NET/gisshixisheng

Online tutorial

http://edu.csdn.Net/course/detail/799
Github

https://github.com/lzugis/

Contact information

q q:1004740957

e-mail:[email protected]

Public account: lzugis15

Q Q group: 452117357 (webgis)
337469080(Android)