地图可视化组件库

安装

npm install gas3d.gl --save

示例

import * as GAS from 'gas3d.gl'
import 'gas3d.gl/dist/react_geoengine_gl.css'

const {Map, BubbleLayerGL} = GAS.default

class BubbleDemo extends React.Component {

  render () {
    const mapProps = {
      viewport: {
        width: 1440,
        height: 900,
        longitude: 120.16537449215035,
        latitude: 30.284125755031162,
        zoom: 2,
        pitch: 0,
        bearing: 0,
        minZoom: 1,
        maxZoom: 16
      },
      tile: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
    }

    const styleOption = {
      pointRadius: 15,
      colorDomain: [0, 1],
      colorRange: ['#FFFFFF', '#1FBAD6'],
      fontColor: 'rgb(255, 255, 255)',
      textAlign: 'center',
      textBaseline: 'middle',
      font: '12px Arial',
      valueAccessor: f => f.properties.childNum
    }
    return <Map {...mapProps}>
      {
        this.state.data && <BubbleLayerGL
          {...styleOption}
          data={this.state.data}
        />
      }
    </Map>
  }

}

ReactDOM.render(<BubbleDemo />, mountNode)

链接

• 组件库
• gas-citybrain

本地开发

你可以使用 开发套件（待上线） 进行在线开发

或者使用honeycomb，拉取brain模版到本地开发:

$ honeycomb init -t brain
$ make install
$ honeycomb start

打开浏览器访问 http://127.0.0.1:8001

FAQ

待补充