This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

Introduction to the

In the development of a map project, a large amount of data is often presented. The overlay function provided by the map API is used to draw the elements, which generates a large number of DOM elements on the page, causing the page to become stuck. In order to solve the large amount of data display, Baidu Map developed a set of data visualization framework MapVGL. Using webGL technology to draw graphics in Canvas can effectively improve page performance.

MapVGL

  • MapVGLIs a geographic information visualization library based on WebGL, which can be used to display a large amount of 3D based geographic information point, line and surface data. The original intention of the design is mainly to solve the problem of large amount of 3D geographical data display and some cool 3D effects.
  • And supportthree.jsThis means that 3d models can also be added to the map by means of layers.
  • At its core, it uses geographic information data to generate visual layers. Then add the visualization layer on top of the map for management.
  • It is important to note that the geographic information data format is defined. Must have ageometryField to define coordinate informationpropertiesField to add attachment information.geometryThe field data format isGeoJSONThe specification.
{
  "geometry": {
    "type": "Point".// Data type
    "coordinates": [125.6.10.1]},"properties": {
    "name": "Ha ha"}}Copy the code

Begin to use

  • through<script>Tags introducedThe map APIThe address andmapvglThe address, hereakYou’re the one who registered with the map service. You can click if you don’t knowhere
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak="></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script><! -- If you are using three.js, you need to refer to the relevant layer --><script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
Copy the code
  • Initialize the map
      // 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()
Copy the code
  • Begin to usemapvglLoad point layer
  1. throughView()Constructor to bind the map instance to the layer manager.
  2. Create a visual layer and add it to the Layer Manager. The dot layer used herePointLayer.mapvglThere are many layers built in so that developers can use them directly without worrying about themwebGLConcrete implementation of drawing.
  3. Based on the geographic information data format, create the point data to use. Format error cannot load data.
  4. Pass the data into the visualization layer.
      // 2. Create MapVGL Layer Manager
      var view = new mapvgl.View({
        map: map
      })

      // 3. Create a visual layer and add it to the Layer Manager
      var layer = new mapvgl.PointLayer({
        color: 'rgba (153,50,204, 1)'.blend: 'lighter'.size: 11
      })
      view.addLayer(layer)

      // 4. Prepare the normalized coordinate data
      var data = []
      for (var i = 0; i < 1000; i++) {
        data.push({
          geometry: {
            type: 'Point'.coordinates: [Math.random() * 25 + 100.Math.random() * 25 + 20]}})}// 5. Associate the layer with the data
      layer.setData(data)
Copy the code

Flash or glow effects

  • Dazzle light effectsBloomEffectAnd glow effectsBrightEffect. The simple idea is to change the colors and add shadows in the visual layer to make it more visible.
      // 2. Create MapVGL Layer Manager
      var view = new mapvgl.View({
        effects: [
          new mapvgl.BrightEffect({
            threshold: 0.2.blurSize: 2.clarity: 0.5
          }),
          new mapvgl.BloomEffect({
            threshold: 0.2.blurSize: 2.0})].map: map
      })
Copy the code

Add event

  • To facilitate graphical manipulation during development,mapvGLAdd mouse events.
  • When creating the visual layer, set the parametersenablePicked: trueOpen the mouse pick, and then addonClickAnd so on, you get a click callback.
      var layer = new mapvgl.PointLayer({
        color: 'rgba (153,50,204, 1)'.blend: 'lighter'.size: 11.enablePicked: true.// Whether it can be picked
        selectedIndex: -1.// Select the index of the data item
        selectedColor: '#ff0000'.// Select the item color
        autoSelect: true.// Set the selected items automatically according to the mouse position
        onClick: (e) = > {
          // Click the event
          console.log(e)
        }
      })
Copy the code

Related articles

MapVGL website document map visualization | baidu front-end engineer to teach you how to implement dazzle light visual effect on the map