deck.gl渲染ScatterplotLayer散点图图层

效果图

ScatterplotLayer散点图图层

在线地址

deck.gl渲染ScatterplotLayer散点图图层
在线如果数据加载慢,是由于数据文件存储在github上,可以稍等一会,或者可以开启vpn

功能说明

本实例实现了deck.gl加载底图,使用ScatterplotLayer渲染散点数据。散点主要反映不同位置男女分布情况

数据格式

前两个参数代表位置,第三个参数代表男(1)、女(2)

数据格式

代码解析

  1. 此部分是引入在线deck.gl包,因为要用到mapboxgl的底图数据,同时引入了mapboxgl包;加载解析csv数据依赖引入了d3js库,还设置了基本的css样式
 <html>
  <head>
    <title>deck.gl ScatterplotLayer Example</title>

    <script src="https://unpkg.com/deck.gl@^8.8.0/dist.min.js"></script>

    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>

    <style type="text/css">
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
      }
    </style>
  </head>
  1. 这部分是es6写法,引入需要的模块DeckGL、ScatterplotLayer,并定义颜色常量,并初始化DeckGL(GeoJsonLayer已经有过解释可参照deck.gl渲染GeoJsonLayer)
    初始化ScatterplotLayer图层,详细配置说明见注释
 <script type="text/javascript">

    const {DeckGL, ScatterplotLayer} = deck;

    const MALE_COLOR = [0, 128, 255];
    const FEMALE_COLOR = [255, 0, 128];

    new DeckGL({
      mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
      initialViewState: {
        longitude: -74,
        latitude: 40.76,
        zoom: 11,
        maxZoom: 16
      },
      controller: true,
      layers: [
        new ScatterplotLayer({ //初始化散点图层
          id: 'scatter-plot', // 图层id
          data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json', // 指定数据源,可以直接访问下载
          radiusScale: 10, // 散点半径放大级别
          radiusMinPixels: 0.5,// 散点最小像素点
          getPosition: d => [d[0], d[1], 0],// 箭头函数读取数据中每个点位,高度统一设置为0
          getColor: d => (d[2] === 1 ? MALE_COLOR : FEMALE_COLOR) //根据数据第三个参数,代表的男女,设置颜色来区分
        })
      ]
    });

  </script>

源代码

拷贝到html文件中可直接用浏览器打开

<html>
  <head>
    <title>deck.gl ScatterplotLayer Example</title>

    <script src="https://unpkg.com/deck.gl@^8.8.0/dist.min.js"></script>

    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>

    <style type="text/css">
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
      }
    </style>
  </head>

  <body></body>

  <script type="text/javascript">

    const {DeckGL, ScatterplotLayer} = deck;

    const MALE_COLOR = [0, 128, 255];
    const FEMALE_COLOR = [255, 0, 128];

    new DeckGL({
      mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
      initialViewState: {
        longitude: -74,
        latitude: 40.76,
        zoom: 11,
        maxZoom: 16
      },
      controller: true,
      layers: [
        new ScatterplotLayer({
          id: 'scatter-plot',
          data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json',
          radiusScale: 10,
          radiusMinPixels: 0.5,
          getPosition: d => [d[0], d[1], 0],
          getColor: d => (d[2] === 1 ? MALE_COLOR : FEMALE_COLOR)
        })
      ]
    });

  </script>
</html>

You may also like...

退出移动版