JSP uses echarts dynamic to identify points on the map _jsp programming

Echarts can easily draw maps on the Web page, charts, and can provide download images, zoom in, zoom out, drag, and other functions, today's main talk about its map type (type: ' map ') is how to achieve.

First in the echarts map coordinates need us to store in a Geocoord attribute, it is a JS Dictionary object, consisting of key/value pairs, the key represents the name of the point, the value is the expression of its coordinates, composed of latitude and longitude, it is an array, such as [136.00,32.00] It represents a coordinate.

Map types of graphs need to focus on the elements

Title: Caption, showing the name of the map represented

Title: {
          text: ' Qing da Yun Light China ',
          subtext: ' Tsingda.cloud ',
          sublink: ' http://www.eee114.com ',
          x: ' Center ',
          y: ' top ',
          textStyle: {
            color: ' #fff '
          }
        }

Toolbox: toolbar, display some display tools, zoom in, zoom out, view datasets, download images, etc.

Toolbox: {
          show:true,
          feature: {
            mark: {show:true},
            DataView: {show:true, Readonly:false},
   restore: {show:true},
            saveasimage: {show:true}}}
        

Egend: Icons show that when series has multiple maps, this value is used to display multiple maps of the icon, can be horizontal and vertical display

Legend: {
          x: ' Left ',
          y: ' top ',
          data: [' online ', ' Offline '],//online and offline corresponds to series's name
          selectedmode:false,//selected suspension
          textStyle: {
            color: ' #fff '
          }
        }

Series: The map shows, to overlay the display map, you can define multiple, the relationship between them is the first on the top, and so on.

Series: [
          //default
          {
            name: ' Bottom template ',
            type: ' Map ',
            maptype: ' Chinese ',
            data:provincemap,
            Geocoord:source,
            itemstyle: {
              normal: {
                color:bgcolor,
                bordercolor: "#eee",
                label: {
                  Show:true,
                  textStyle: {
                    color: "#fff"}}}
              , emphasis: {color: "RGBA (128, 128, 128, 0.5)"}
   },
          }

Markpoint: Point identification, used to identify the post on the map, these points are usually stored on a Geocoord object, which is a dictionary, which is described at the beginning of the article.

Markpoint: {///dynamic tag
          large:true,//This option, suspension automatic invalidation
          symbolsize:2,
          itemstyle: {
            normal: {
              shadowblur:2 ,
              shadowcolor: ' Rgba (Panax Notoginseng, 140, 249, 0.8) ',
              color:oncolor
            }
          },
          data: []
        }

The data object in Markpoint is the point that needs to be displayed on this map, which is a character array to store the keys in Geocoord!

SetOption: Adds a Map object to the specified Map object

 var MyChart = echarts.init (document.getElementById (' main '));
 var option={};
 mychart.setoption (option);

Dynamic construction of point identification on a map markpoint

The idea is to pay the tagged point dynamically to the Geocoord and Markpoint data objects, so that you can dynamically mark points on the map.

$.get ("/map/getoffmap", function (data) {for
         
          (var i in data) {
            Option.series[0].geocoord[data[i].longitude + "_ "+ data[i].latitude] = [Parsefloat (data[i].longitude), parsefloat (Data[i].latitude)];
            Option.series[1].markpoint.data.push ({name:data[i].longitude + "_" + Data[i].latitude});
          }

          mychart.setoption (option);

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.