This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Introduction to the

When developing a map visualization page, the product wants to display a statistical map at the corresponding location in the city. At this time don’t panic, loudly say where you copied this demand. Good to see the page, there is no front end people will not develop. After research found that the use of Baidu map API is custom ECharts overlay.

mulch

  • All coverings in baidu map are inheritedOverlay, so we implement custom coverings by inheriting from the base class.
  1. initialize(), which is used to initialize the overlay when calledmap.addOverlayWhen,APIThis method is called.
  2. draw()When the state of the map changes, the system calls to draw the overlay.
  3. show(), showing the cover.
  4. hide()To hide the coverings.
  5. MapPanesThis class represents a collection of containers for all coverings on the map. It has no constructor and is represented as object literals. throughMapthegetPanesMethod to get an instance of the object. Custom coverings must be put in before they can be displayed.

Loading the map

  • through<script>Tags introducedThe map APIThe address andechartsThe address, hereakYou’re the one who registered with the map service. You can click if you don’t knowhere
   <! -- echarts -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <! -- -- -- > baidu
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=?"></script>
  
    <script>
      // Baidu Map API function
      var map = new BMapGL.Map('bmap') // Create a Map instance
      // Initialize the map and set the center point coordinates and map level
      map.centerAndZoom(new BMapGL.Point(121.480509.31.23592), 10)
      // Enable the mouse wheel event
      map.enableScrollWheelZoom()
    </script>
Copy the code

Custom ECharts coverings

  • Create a new function inheritanceOverlayThrough theinitialize()anddraw()Function to implement custom coverings.
      / * * *@param Width Node width *@param Height Specifies the height of the node@param Pot map point coordinates *@param Callback load echarts * */
      function echartsOverlay(width, height, pot, callback) {
        this._width = width || 100
        this._height = height || 100
        this._pot = pot
        this._callback = callback
      }
      // Inherit the Overlay base class
      echartsOverlay.prototype = new BMapGL.Overlay()

      echartsOverlay.prototype.initialize = function (map) {
        this._map = map
        / / the DOM node
        this._div = document.createElement('div')
        this._div.style.zIndex = 1
        this._div.style.width = this._width + 'px'
        this._div.style.height = this._height + 'px'
        this._div.style.position = 'absolute'
        // Add the cover to the tag cover list
        map.getPanes().labelPane.appendChild(this._div)
        // Pass in the DOM node to draw the echarts
        this._callback(this._div)
        return this._div
      }

      echartsOverlay.prototype.draw = function () {
        // pointToOverlayPixel() gets the coordinates of the corresponding covering container based on the geographic coordinates
        let rel_xy = this._map.pointToOverlayPixel(this._pot)
        // The midpoint of the covering is the coordinate point
        this._div.style.left = rel_xy.x - this._width / 2 + 'px'
        this._div.style.top = rel_xy.y - this._height / 2 + 'px'
      }
Copy the code
  1. The created element node needs to be used'absolute'Positioning.
  2. Positioning of theLeft, top,The parameters need to bedraw()In a function. When the map is zoomed in and out, the coordinates need to be recalculated.
  3. Using a callback function, returnDOM nodeUsed forEChartsThe drawing.

Add echarts

      var drawChart = function (obj) {
        var chartTem = echarts.init(obj)
        var option = {
          tooltip: {
            trigger: 'axis'
          },
          radar: [{indicator: [{text: 'brand'.max: 100 },
                { text: 'content'.max: 100 },
                { text: 'Usability'.max: 100 },
                { text: 'functions'.max: 100}].center: ['50%'.'50%'].radius: 60.splitArea: {
                areaStyle: {
                  color: ['#77EADF'].shadowColor: 'rgba (0, 0, 0, 0.2)'.shadowBlur: 10}},name: {
                formatter: '[value}]'.textStyle: {
                  color: '#DC143C'}}}].series: [{type: 'radar'.tooltip: {
                trigger: 'item'
              },
              areaStyle: {},
              data: [{value: [60.73.85.40].name: 'Some software'
                }
              ]
            }
          ]
        }
        chartTem.setOption(option)
      }
Copy the code
  1. It’s for regular use and hereechartsDevelopment is the same. At the end of the articleEcharts sample, those who don’t can go and have a look.
  2. Not all statistics are suitable to be displayed on a map, personally I think pie charts and radar charts are best displayed on a map.

call

      var myCompOverlay = new echartsOverlay(250.250.new BMapGL.Point(121.480509.31.23592), drawChart)
      map.addOverlay(myCompOverlay)
Copy the code

  • Use this method to loadEChartsOne big problem is that the size of the generated statistics is fixed and does not change with the map. In this caseEChartsThere is also a solutionbmap.min.js.

reference

Echarts example Baidu API