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

Introduction to the

In the development of map visualization projects, in order to progress the leader is not to give you extra time to complete a feature. At this point, we need to find a framework in the community to implement this functionality. Of the many eligible frameworks, Echarts was found to be the best fit for the product.

Echarts Map extension

  • Contributor: Yi Shen
  • Baidu map extension, baidu map can show point map, line diagram, heat map, etc.
  • The data format is the same as it is in the GEO coordinate system[Longitude, latitude, numerical size, other dimensions...]

The configuration is very simple, as follows:

option = {
    // Load the bmap component
    bmap: {
        // Baidu map center longitude and latitude
        center: [120.13066322374.30.240018034923].// Baidu map zoom
        zoom: 14.// To enable drag scale, you can set only 'scale' or 'move'.
        roam: true./ / baidu map custom style, see http://developer.baidu.com/map/jsdevelop-11.htm
        mapStyle: {}},series: [{
        type: 'scatter'.// Use the Baidu map coordinate system
        coordinateSystem: 'bmap'.// The data format is the same as in the Geo coordinate system. Each item is [longitude, latitude, value size, other dimensions...]
        data: [[120.30.1]]]}}// Obtain baidu map instance, using baidu map built-in control
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
Copy the code
  • Since it is used on Baidu map, statistical graph type also needs to draw data through coordinate mode. Other types of graphs simply draw the original graph on top of the map.
  • Need to pay attention tobmap.min.jsExtension plug-ins are based on2DType of map developed as neededtype=webglType map will need to modify part of the source code.

Begin to use

  • through<script>Tags introducedThe map APIAddress,echartsAddress, extension address, hereakYou’re the one who registered with the map service. You can click if you don’t knowhere.
    <! -- -- -- > baidu
    <script src="https://api.map.baidu.com/api?v=3.0&ak=?"></script>
    <! -- echarts -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <! -- Extension map plugin -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
    
Copy the code
  • Initialize theecharts
. <div id="bmap" class="bmap"></div>
...
      var myChart = echarts.init(document.getElementById('bmap'))
      option = {
        title: {
          text: ' '.left: 'center'.textStyle: {
            color: '#fff'}},tooltip: {
          trigger: 'item'.formatter: function (res) {
            return res.name + ':' + res.value[2]}},bmap: {
          center: [104.114129.37.550339].zoom: 6.roam: true
        },
        series: [{name: 'test'.type: 'effectScatter'.coordinateSystem: 'bmap'.data: [{name: 'Shanghai'.value: [121.480509.31.23592.10] {},name: 'nanjing'.value: [118.804147.32.070037.10]}],symbolSize: function (val) {
              return val[2]},rippleEffect: {
              brushType: 'stroke'
            },
            itemStyle: {
              normal: {
                color: '#ff0000'.shadowBlur: 10.shadowColor: '# 333'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
Copy the code

  1. The detailed configuration here can be understood on the official website.
  2. The main difference is addingbmapParameter configuration baidu map inseriesThe cat wascoordinateSystem: 'bmap'Change the original coordinate type to baidu map Mercator type.
  3. I found a small one herebug. Browser bordermarginThe default is not0, I modifiedhtmlFrom the outside to0Later,EchartsThe point coordinates are misaligned. After a long search, I found that I set the element node height to100%When I fix the height of the element nodes, the coordinates are correct. So remind you to set a fixed height at the end.
  • Add click Event
      // Click on each site to perform related operations
      myChart.on('click'.function (e) {
        console.log(e) // Information for each identification point
      })
Copy the code
  • I’m just going to useEchartsWe can do what we want.

Use the map native API

var bmap = myChart.getModel().getComponent('bmap').getBMap()
var pt = new BMap.Point(116.417.39.909)
var markerTem = new BMap.Marker(pt) // Create the annotation
bmap.addOverlay(markerTem) // Add the annotation to the map
Copy the code

  • throughEchartsGet a map instance, after and directly use Baidu map no difference.
  • Using them together is as simple as that, and of course this is just a brief description of how to use them. Many big shots in the community use them to create some useful features, official examples.