jsp uses ECharts to dynamically identify points on the map

ECharts can easily draw maps and charts on web pages, and can provide functions such as downloading images, zooming in, zooming out, dragging, etc. Today, I mainly talk about how its map type (type: 'map') is realized.

First of all, the coordinates of ECharts map need to be stored in an geoCoord attribute, which is a dictionary object of JS, which is composed of key/value pairs. The key represents the name of the point, and the value represents its coordinates, which is composed of longitude and latitude. It is an array, such as [136.00, 32.00], which represents a coordinate.

Elements that need attention in map-type charts

title: Title, showing the name represented by this map

title: {
          text: ' Clear clouds light up China ',
          subtext: 'Tsingda.Cloud',
          sublink: 'http://www.eee114.com',
          x: 'center',
          y: 'top',
          textStyle: {
            color: '#fff'
          }
        }

toolbox: Toolbar, showing 1 display of 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: Icon display. When series has multiple maps, this value is used to display the icons of multiple maps, which can be displayed horizontally or vertically

legend: {
          x: 'left',
          y: 'top',
          data: [' Online ', ' Offline '],// Online and offline correspond to series The name of 
          selectedMode: false,// Select suspension 
          textStyle: {
            color: '#fff'
          }
        }

series: Map display, which is used to display maps on top, you can define multiple maps, and the relationship between them is that the first one is at the top, and so on.

series: [
          // Default 
          {
            name: ' Bottom template ',
            type: 'map',
            mapType: 'china',
            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 identifier, used to identify the back points on the map. These points are usually stored on an geoCoord object, which is a dictionary, as described at the beginning of this article.

markPoint: {// Dynamic marker 
          large: true,// With this option, levitation automatically fails 
          symbolSize: 2,
          itemStyle: {
            normal: {
              shadowBlur: 2,
              shadowColor: 'rgba(37, 140, 249, 0.8)',
              color: onColor
            }
          },
          data: []
        }

markPoint in the data object is the map needs to show the point, it is a character array, used to store geoCoord keys!

setOption: Adds a map object to a specified map object

 var myChart = echarts.init(document.getElementById('main'));
 var option={};
 myChart.setOption(option);

Dynamic construction of point identification markPoint on map

The general idea is to dynamically pay the points to be marked to the data objects of geoCoord and markPoint, so that the points can be dynamically marked 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);