l7 绘制地图 并有文字图层

    const scene = new Scene({

      id: 'map_container',

      map: new GaodeMap({

        type: 'amap',

        center: [ 22.546432, 113.944651 ],

        zoom: 10,

        pitch: 5,

        token: '74f224aca50b64d7d2bcdd780535f885'

      })

    })

    scene.on('loaded', () => {

      const dataSource = new Source(this.sourceData, {

        parser: {

          type: 'json',

          x: 'x',

          y: 'y'

        },

        cluster: true

      })

      // 行政区域

      const choropleth = new Choropleth({

        source: {

          data: [],

          joinBy: {

            sourceField: 'adcode',

            geoField: 'adcode'

          },

          transforms: []

        },

        viewLevel: {

          level: 'country',

          adcode: '100000'

        },

        autoFit: true,

        color: '#ccc',

        style: {

          opacity: 1,

          stroke: '#F2F7F7',

          lineWidth: 0.6,

          lineOpacity: 0.8

        },

        label: {

          visible: true,

          field: 'name',

          style: {

            fill: '#000',

            opacity: 0.8,

            fontSize: 10,

            stroke: '#f0f0f0',

            strokeWidth: 2,

            textAllowOverlap: false,

            padding: [5, 5],

            textOffset: [0, 40]

          }

        },

        zoom: {

          position: 'bottomright'

        }

      })

      // 气泡标注

      const pointLayer = new PointLayer({

        autoFit: true,

        zIndex: 1

      })

        .source(dataSource)

        .shape('circle')

        .scale('point_count', {

          type: 'quantile'

        })

        .size(20)

        .active(true)

        .color('#1AA9FF')

        .style({

          strokeWidth: 1,

          stroke: '#fff'

        })

      // 聚合图标注

      const pointLayerText = new PointLayer({

        autoFit: true,

        zIndex: 2

      })

        .source(dataSource)

        .shape('count', 'text')

        .size(15)

        .active(false)

        .color('red')

        .style({

          padding: [ 1, 1 ], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近

          stroke: '#ffffff', // 描边颜色

          strokeWidth: 0 // 描边宽度

        })

      choropleth.addToScene(scene)

      scene.addLayer(pointLayer)

      scene.addLayer(pointLayerText)

    })

    await this.$nextTick()

  }

你可能感兴趣的:(前端,javascript,开发语言)