❤
npm
Sign UpSign In

gas.gl

3.5.45 • Public • Published

GeoEngineSDK USAGE

import

  • 如果使用的是jQuery和Bootstrap，请使用 'geoengine'
  • react开发者，请使用 'react_geoengine'
  • webGL高性能支持请使用 'react_geoengine_gl'
import {
  geoengine,
  react_geoengine,
  react_geoengine_gl
} from 'gas.gl'

webGL supported Layer(Recommand 推荐使用 渲染性能高，速度快)

通用说明

  • webGL的图层data作为props传入，data必须是geojson的格式

瓦片配置及使用示例

TileLayer(静态瓦片)

  • 适用场景：一般作为贴图，底图，采用第三方底图服务，如高德，百度等，或者展现自己的瓦片服务

  • 示例代码

    const options = {
        maxZoom: 15,
        opacity: 0.75
    }
    geoengine.tileLayer('http://xxxx.map.com/{z}/{x}/{y}.png', options).addTo(map)

  • 查看更多配置项

bubbleLayer(气泡图）

  • 适用场景：适用于气泡图和散点图有点类似，但是气泡图可以依据数据确定气泡的大小和颜色

  • 示例代码

    var bubbleLayer = geoengine.bubbleLayer({
    ds: geoengineDs,
    fill: {
        range: ['rgb(0, 167, 157)', 'rgb(255, 250, 0)', 'rgb(255, 162, 0)', 'rgb(200, 7, 0)'],
        domain: [0, 1000, 2000, 3000],
    },
    radius: {
        range: [5, 10, 15, 20],
        domain: [0, 1000, 2000, 3000],
    },
    gap: 4, // 这只填充颜色内圈和外圈之间的间隔，可认为是内圈半径等于radius减去gas得到内圈半径进行fill
    font: { // 设置气泡图上的字体的大小和颜色
        size: 12,
        fill: 'black'
    },
    valueName: 'product',
    })
    bubbleLayer.addTo(map)

  • 支持的数据格式

    geoengineDs =  new HttpDatasource({
    url:'router to ur data service'
    })
    //或者
    geoengineDs =  new MemoryDatasource({
    data:{
        type: "FeatureCollection",
        features: [{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-131.5,-15.5]
        },
        properties: {
            value: 1424
        }
        }]
    }
    })

  • 配置项

    Option Type Default Description
    radius Number/Object null 气泡半径大小
    fill String/Object null 气泡背景填充色
    gap Number 3 填充颜色内圈和外圈之间的间隔，可认为是内圈半径等于radius减去gas得到内圈半径进行fill
    valueName String 'value' 数据中用来渲染图层所用的值
    font Object null 设置气泡图上的字体的大小和颜色
    getValue Function (feature)=>{} 返回用来渲染图层所用的值

gridHeatLayer(栅格图)

  • 适用场景: 展现栅格类数据，如气象数据，海洋数据，地块热度数据等

  • 示例代码

    const gridHeatLayerGL = react_geoengine_gl.GridHeatLayerGL({
    data,
    fill: {
        range: ['rgb(0, 167, 157)', 'rgb(255, 250, 0)', 'rgb(255, 162, 0)', 'rgb(200, 7, 0)'],
        domain: [0, 1000, 2000, 3000],
    },
    valueName: 'value',
    minPixel: 6,
    gridSize: {
        width: 1,
        height: 1,
        unit: 'arc'
    }
    })
    gridHeatLayerGL.addTo(map)

  • 支持的数据格式

    data =  {
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
        type: "Point",
        coordinates: [120,30]
        },
        properties: {
        value: 1424
        }
    }]
    }

  • 默认项

    Option Type Default Description
    cellSize Number 500 以米为单位的每个单元的大小
    visible Boolean true 是否可见
    opacity Number 1 透明度
    pickable Boolean true 图层是否响应鼠标指针拾取事件
    coverage Number 1 取值范围0-1,单元格的最终大小通过coverage * cellSize计算
    highlightColor Array [255, 255, 255, 255] RGBA颜色用于渲染突出显示的对象
    autoHighlight Boolean false 鼠标指针（悬停时）用highlightColor高亮显示

HoneyCombLayerGL(蜂窝)

  • 适用场景:将地图区域规则的按网格来进行划分，在每个网格中统计相关信息，用不同颜色来展示每个网格数量的大小

  • 示例代码

    var honeyCombLayerGL = react_geoengine_gl.HoneyCombLayerGL({
    data,
    radius: 3000,
    coverage: 1
    redraw:true,
    visible:true,
    opacity:1
    })
    honeyCombLayerGL.addTo(map)

  • 支持的数据格式

    data =  {
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
        type: "Point",
        coordinates: [120,30]
        },
        properties: {
        value: 1424
        }
    }]
    }

  • 配置项

    Option Type Default Description
    pickable Boolean true 图层是否响应鼠标指针拾取事件
    opacity Number 1 透明度
    visible Boolean true 是否可见
    colorDomain Array [min(count), max(count)] counts分界值
    colorRange Array [[255,255,178],[254,217,118],[254,178,76],[253,141,60],[240,59,32],[189,0,38]] counts分界值映射的颜色范围
    radius Number 100 以米为单位的六角仓的半径
    coverage Number 1 取值范围0～1. 六边形的最终半径计算coverage * radius
    highlightColor Array [255, 255, 255, 255] RGBA颜色用于渲染突出显示的对象
    autoHighlight Boolean false 鼠标指针（悬停时）用highlightColor高亮显示
    setHoneyCombColor Function null 设置蜂窝背景色

BezierCurveLayer(贝塞尔曲线)

  • 适用场景:可以用来创建平滑的曲线

  • 示例代码

    var bezierCurveLayer = geoengine.BezierCurveLayer({
    ds:geoengineDs,
    stroke: 'rgb(0, 167, 157)',
    strokeWidth: 1,
    startCircle: {
        radius: 3,
        strokeWidth: 1,
        fill: 'rgb[0, 0, 0]'
    },
    strokeDashArray: (feature) => {
        return feature.properties.strokeDashArray
    },
    endArrow: {
        length: 10
    },
    curveness: 0.2
    })
    bezierCurveLayer.addTo(map)

  • 支持的数据格式

    geoengineDs =  new HttpDatasource({
    url:'router to ur data service'
    })
    //或者
    geoengineDs =  new MemoryDatasource({
    data:{
        type: "FeatureCollection",
        features: [{
        start: [-10.52, -126.52],
        end: [-7.50, -123.50],
        ctrlPoints: [[-9.52, -122.513]],
        properties: {
            key: 'second',
            strokeDashArray:null
        }
        }]
    }
    })

  • 配置项

    Option Type Default Description
    curveness Number 0.2 曲度
    endArrow Object map.zoom 目前只支持一个length key,表示终点箭头长度
    strokeWidth Number 3 线宽
    startCircle Object {strokeWidth:1, radius:2, fill:'rgb[0, 0, 0]'} 起始点圆圈属性设置
    strokeDashArray Function/Array null 线条样式
    fill Object null 背景色
    stroke Object/String {range: ['rgb(0, 167, 157)']} 线条颜色

ScatterLayerGL(麻点图)

  • 适用场景: 采用成对的纬度和经度坐标点，并将它们呈现为具有特定半径的圆

  • 示例代码

    var scatterLayerGL = react_geoengine_gl.ScatterLayerGL({
    data,
    fill: {
        range  : [[0, 167, 157], [255, 250, 0], [255, 162, 0], [200, 7, 0]], 
        domain : [0, 10, 20, 30],
    },
    valueName : 'deepth',
    radius : 20
    redraw:true,
    visible:true,
    radiusScale:100
    })
    scatterLayerGL.addTo(map)

  • 支持的数据格式

    data =  {
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
        type: "Point",
        coordinates: [120,30]
        },
        properties: {
        value: 1424
        }
    }]
    }

  • 配置项

    Option Type Default Description
    pickable Boolean true 图层是否响应鼠标指针拾取事件
    visible Boolean true 是否可见
    opacity Number 1 透明度
    outline Boolean false Only draw outline of points
    strokeWidth Number 5 麻点边宽
    radiusMinPixels Number 1 The minimum radius in pixels
    radiusMaxPixels Number Number.MAX_SAFE_INTEGER The maximum radius in pixels
    radiusScale Number 10 A global radius multiplier for all points
    autoHighlight Boolean false 鼠标指针（悬停时）用highlightColor高亮显示
    highlightColor Array [255, 255, 255, 255] RGBA颜色用于渲染突出显示的对象
    radius Number 5 半径
    setScatterColor Function null 设置麻点背景色
    setRadius Function null 设置麻点半径
    fill Object/String null 设置麻点背景色
    valueName String 'value' 数据中用来渲染图层所用的值
    getValue Function (feature)=>{} 返回用来渲染图层所用的值

heatLayer(热力图)

  • 适用场景: 热力图是以特殊高亮的形式显示访客所在的地理区域的图示，通过热力图可以分析某个事件的热度，比如景点的人流量等等

  • 示例代码

    const heatLayer = geoengine.heatLayer({
    ds: geoengineDs,
    fill: {
        range: ['rgb(0, 167, 157)', 'rgb(255, 250, 0)', 'rgb(255, 162, 0)', 'rgb(200, 7, 0)'],
        domain: [0, 1000, 2000, 3000],
    },
    valueName: 'value',
    blur: 20,
    radius: 15
    })
    heatLayer.addTo(map)

  • 了解更多关于blur和radius配置信息

  • 支持的数据格式

    geoengineDs =  new HttpDatasource({
    url:'router to ur data service'
    })
    //或者
    geoengineDs =  new MemoryDatasource({
    data:{
        type: "FeatureCollection",
        features: [{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [120,30]
        },
        properties: {
            value: 1424
        }
        }]
    }
    })

  • 配置项

    Option Type Default Description
    blur Number 3 光晕尺寸
    radius Number 5 半径大小
    fill Object null 光晕背景色
    valueName String 'value' 数据中用来渲染图层所用的值
    unit String 'pixel' 支持meter(米)、arc(度)、pixel(像素)三种
    minPixel Number 1 当unit为arc或meter的时候，该配置生效,并且表示当zoom缩放级别很小时，最小的像素尺寸
    minOpacity Number 0.1 光晕最小透明度
    getValue Function (feature)=>{} 返回用来渲染图层所用的值

adminDistrictLayer(区划热力图)

  • 适合场景:适合展现和省市区域相关数据，并且希望结合地形展现

  • 示例代码

    const adminDistrictLayer = geoengine.adminDistrictLayer({
    ds: geoengineDs,
    fill: {
        range: ['rgb(0, 167, 157)', 'rgb(255, 250, 0)', 'rgb(255, 162, 0)', 'rgb(200, 7, 0)'],
        domain: [90, 95, 100, 105],
    },
    url: {
        city: '/examples/city.svg', // 城市级别的基础svg
        province: '/examples/province.svg', // 省份级别的基础svg，默认级别，返回数据中，若properties有city属性，则为城市级别
    }
    })
    adminDistrictLayer.addTo(map)

  • 支持的数据格式

    geoengineDs =  new HttpDatasource({
    url:'router to ur data service'
    })
    //或者
    geoengineDs =  new MemoryDatasource({
    data:{
        type: "FeatureCollection",
        features: [{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [120,30]
        },
        properties: {
            value: 1424
        }
        }]
    }
    })

  • 配置项

    Option Type Default Description
    url Object null 城市、省份svg链接地址
    fill Object null 背景色
    valueName String 'value' 数据中用来渲染图层所用的值
    getValue Function (feature)=>{} 返回用来渲染图层所用的值

markerLayer(自定义marker图)

  • 适合场景:marker用来表示一个点位置的可见元素，每个标注自身都包含地理信息

  • 示例代码

    const markerLayer = geoengine.markerLayer({
    ds: geoengineDs,
    opacity:1,
    onClickObject(e){},
    renderPopup(feature){
        L.popup().setContent('<p> this is popup </p>')
    },
    renderTooltip(feature){
        L.tooltip().setContent('<p> this is tootip </p>')
    }
    })
    markerLayer.addTo(map)

  • 支持的数据格式

    geoengineDs =  new HttpDatasource({
    url:'router to ur data service'
    })
    //或者
    geoengineDs =  new MemoryDatasource({
    data:{
        type: "FeatureCollection",
        features: [{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [120,30]
        },
        properties: {}
        }]
    }
    })

  • 配置项

    Option Type Default Description
    renderFeature Function feature => {return L.divIcon({html: <pre style="width: 100px; border: 1px solid black; background: rgba(0,0,0,0.7); color: white; word-break: break-all; white-space: normal">${JSON.stringify(feature)}</pre>, className: 'geoengin-marker'})} 渲染marker标注默认展示内容
    renderPopup Function feature => {return null} 渲染marker click后弹出层
    renderTooltip Function feature => {return null} 渲染marker hover后弹出层
    opacity Number 1 透明度

MarkerCluster(聚合图)

  • 适用场景:适用于展示需要根据当前地图zoom大小动态聚合marker效果

  • 示例代码

    <MarkerCluster
    data={this.state.data}
    radius={70}
    customMarker={customMarker}
    customClusterMarker={customClusterMarker}
    initialCluster={this.initialCluster}
    maxZoom={16}
    minZoom={1}
    mapCluster={this.mapCluster}
    reduceCluster={this.reduceCluster}
    />

  • 支持的数据格式

    data:{
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
        type: "Point",
        coordinates: [120,30]
        },
        properties: {}
    }]
    }

  • 配置项

    Option Type Default Description
    radius Number 80 marker半径
    visible Boolean true 是否可见
    extent Number 256 瓦片范围, 相对于此值计算半径
    maxZoom Number 16 聚合的最大级别
    minZoom Number 0 聚合的最小级别
    nodeSize Number 64 KD树叶节点的大小。影响性能
    customMarker Function (feature, latlng) => L.marker(latlng) 渲染单点marker
    customClusterMarker Function 渲染聚合marker
    initialCluster Function 值初始化,供mapCluster、reduceCluster函数中使用
    mapCluster Function initialCluster中初始化值和properties值做映射
    reduceCluster Function 计算结果存放在最终feature.properties

polylineLayerGL(折线图)

  • 适用场景:适用于绘制和展现道路路况，物流路径等

  • 示例代码

    const polylineLayerGL = react_geoengine_gl.PolylineLayerGL({
    data,
    strokeWidth: 3,
    redraw:true,
    visible:true,
    setLineColor(){return feature=>{return [0, 167, 157]}},
    })
    polylineLayerGL.addTo(map)

  • 支持的数据格式

    data:{
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
        type: "LineString",
        coordinates: [[120,30],[121,31],...]
        },
        properties: {}
    }]
    }

  • 配置项

    Option Type Default Description
    strokeWidth Nubmer null 线宽
    fp64 Boolean false 图层是否应以高精度64位模式呈现
    miterLimit Nubmer 4 The maximum extent of a joint in ratio to the stroke width. Only works if rounded is false
    widthScale Nubmer 1 the path width multiplier that multiplied to all paths
    widthMinPixels Nubmer 0 The minimum path width in pixels
    widthMaxPixels Nubmer Number.MAX_SAFE_INTEGER The maximum path width in pixels
    pickable Boolean true 图层是否响应鼠标指针拾取事件
    opacity Nubmer 1 透明度
    visible Boolean true 是否可见
    rounded Boolean false Type of joint. If true, draw round joints. Otherwise draw miter joints
    autoHighlight Boolean false 鼠标指针（悬停时）用highlightColor高亮显示
    highlightColor Array [255, 255, 255, 255] RGBA颜色用于渲染突出显示的对象
    valueName String 'value' 数据中用来渲染图层所用的值
    stroke String/Object null 线条颜色
    getDashArray Function null the dash array to draw each path with: [dashSize, gapSize] relative to the width of the path
    setLineColor Function null 设置线条颜色
    getValue Function null 返回用来渲染图层所用的值
    coordinateSystem Function null Specifies how layer positions and offsets should be geographically interpreted.
    coordinateOrigin Function null Specifies a longitude and a latitude from which meter offsets are calculated. See the article on Coordinate Systems for details

TripLayerGL(轨迹图)

  • 适用场景:适用于绘制动态轨迹

  • 示例代码

    const tripLayerGL = react_geoengine_gl.TripLayerGL({
    data,
    strokeWidth: 30, 
    setColor(feature){return [0, 167, 157]},
    redraw:true,
    visible:true,
    trailLength:180,
    loopLength:1100,
    loopTime:60000
    })
    tripLayerGL.addTo(map)

  • 支持的数据格式

    data:{
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
        type: "LineString",
        coordinates: [[120,30],[121,31],...]
        },
        properties: {}
    }]
    }

  • 配置项

    Option Type Default Description
    pickable Boolean true 图层是否响应鼠标指针拾取事件
    opacity Nubmer 1 透明度
    visible Boolean true 是否可见
    trailLength Nubmer 120 线尾长
    strokeWidth Nubmer null 线宽
    setColor Function null 设置线条颜色

PolygonLayerGL(多边形）

  • 适用场景:适用于展示不规则的封闭区域数据

  • 示例代码

    const polygonLayerGL = geoengine.PolygonLayerGL({
    data,
    filled : true,
    stroked: true,
    redraw: true,
    visible: true,
    rounded: true
    })
    polygonLayerGL.addTo(map)

  • 支持的数据格式

    data:{
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
        type: "Polygon",
        coordinates: [[120,30],[121,31],...]
        },
        properties: {}
    }]
    }

  • 配置项

    Option Type Default Description
    strokeWidth Number 1 线宽
    pickable Boolean true 图层是否响应鼠标指针拾取事件
    opacity Number 1 透明度
    visible Boolean true 是否可见
    lineWidthMaxPixels Number Number.MAX_SAFE_INTEGER The maximum line width in pixels
    lineWidthMinPixels Number 1 The minimum line width in pixels
    lineWidthScale Number 1 The line width multiplier that multiplied to all lines
    lineJointRounded Boolean false Type of joint. If true, draw round joints. Otherwise draw miter joints
    lineMiterLimit Number 4 The maximum extent of a joint in ratio to the stroke width. Only works if lineJointRounded is false
    fp64 Boolean false Whether the layer should be rendered in high-precision 64-bit mode
    filled Boolean true 是否渲染背景色
    stroked Boolean false 是否渲染多边形边
    autoHighlight Boolean false 鼠标指针（悬停时）用highlightColor高亮显示
    highlightColor Array [255, 255, 255, 255] RGBA颜色用于渲染突出显示的对象
    valueName String 'value' 数据中用来渲染图层所用的值
    getValue Function 返回用来渲染图层所用的值
    setLineColor Function 设置线条颜色
    setFillColor Function 设置多边形填充色
    setLineWidth Function 设置线宽

symbolLayer(标注图)

  • 适用场景:与麻点图不同的是，麻点图根据颜色区分，标注图根据不同的图片或者形状来标注数据

  • 示例代码

    const symbolLayer = geoengine.symbolLayer({
    ds: geoengineDs,
    symbol: {
        domain: [0, 1000, 2000, 3000],
        range: [
        {
            src: 'http://pic.58pic.com/58pic/15/44/82/36A58PICtFS_1024.jpg',
        },
        {
            src: 'http://img4.imgtn.bdimg.com/it/u=4019847970,3718827910&fm=21&gp=0.jpg',
        },
        {
            src: 'http://www.w3school.com.cn/svg/ellipse1.svg',
            originX: 'center', // 可以是center, left, right，表示图形相对于横轴轴的位置
            originY: 'center', // 可以是center, top, bottom，表示图形相对于纵轴的位置
            width: 10, // 宽度
            height: 10, // 高度
            angle: 45, // 顺时针转动的角度
        },
        {
            src: 'http://tupian.enterdesk.com/2012/0828/cyf/04/enter%20%2811%29.jpg',
        }
        ],
    },
    valueName: 'value',
    })
    symbolLayer.addTo(map)

  • 支持的数据格式

    geoengineDs =  new HttpDatasource({
    url:'router to ur data service'
    })
    //或者
    geoengineDs =  new MemoryDatasource({
    data:{
        type: "FeatureCollection",
        features: [{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [120,30]
        },
        properties: {value:20}
        }]
    }
    })

  • 默认项

    Option Type Default Description
    symbol Object {src:'http://img4.imgtn.bdimg.com/it/u=4019847970,3718827910&fm=21&gp=0.jpg',originX: 'center',originY: 'center',width: 10,height: 10,angle: 0} 标注信息配置
    valueName String 'value' 数据中用来渲染图层所用的值
    getValue Function 返回用来渲染图层所用的值

circleRangeLayer(圈选)

  • 适用场景:对数据进行圈选分析

  • 圈选事件

    circleRangeLayer.on('circlechange', function(circle) { //圈选变化事件
        console.log(circle)
    })
     
    circleRangeLayer.on('circleconfirm', function(circle) { //单击圈选锁定事件
        console.log(circle)
    })
     
    circleRangeLayer.on('enableedit', function() { // 可重新圈选事件
     
    })
     
    circleRangeLayer.on('disableedit', function() { // 不可重新圈选事件
     
    })
     
    circleRangeLayer.on('circleaffirm', function(circle) { // 双击圈选确认事件
    console.log('center.lat===', circle.startLatlng.lat);
    console.log('center.lng===', circle.startLatlng.lng);
    console.log('radius===', circle.radius);
    })
     

  • 示例代码

    function setTooltip(center, radius, isCirclEditEnabled) {
    const {lat, lng} = center
    return `经度: ${lng.toFixed(9)}
        <br/>
        纬度: ${lat.toFixed(9)}
        <br/>
        半径: ${radius} 米
        <br/>
        单击圆圈${isCirclEditEnabled ? "锁定圈选" : "重新圈选"}
        <br/>
        双击圆圈确认圈选范围和半径
    `
    }
    const circleRangeLayer = geoengine.circleRangeLayer({
    strokeColor: "rgba(255,0,0,1)", // 设置圆形颜色
    strokeWeight: 3, // 设置圆圈线宽
    fillColor: "rgba(255,0,0,0.5)", // 设置填充颜色
    toolTipContent: setTooltip, // 设置提示内容
    toolTipClass: "circle-range-tooltip", // 提示内容样式
    disableEditWhenMouseUp: false, // 鼠标释放时静止重绘
    })
    circleRangeLayer.on('circleaffirm', function(circle) {
    console.log('center.lat===', circle.startLatlng.lat);
    console.log('center.lng===', circle.startLatlng.lng);
    console.log('radius===', circle.radius);
    sendCircleRequest(circle)
    })
    circleRangeLayer.addTo(map)

  • 默认配置

    function defaultTooltip(center, radius, isCirclEditEnabled) {
    const {lat, lng} = center
    return `经度: ${lng.toFixed(9)}
        <br/>
        纬度: ${lat.toFixed(9)}
        <br/>
        半径: ${radius} 米
        <br/>
        单击圆圈${isCirclEditEnabled ? "锁定圈选" : "重新圈选"}
        <br/>
        双击圆圈确认圈选范围和半径
    `
    }
    {
    strokeColor: "rgba(255,0,0,1)",
    strokeWeight: 3,
    fillColor: "rgba(255,0,0,0.5)",
    toolTipContent: defaultTooltip,
    toolTipClass: "circle-range-tooltip",
    disableEditWhenMouseUp: false,
    }

  • 可选配置属性包括['strokeColor', 'strokeWeight', 'fillColor', 'toolTipContent', 'toolTipClass', 'disableEditWhenMouseUp']

  • 效果图

    circle_range

工具

  • 当需要和页面做交互的时候，例如点击道路，出现具体的路况数据，而当有多个图层叠加的时候，需要确认图层数据查找的先后顺序，layerDB就是用来做前端交互，获取数据，所属图层，和页面点击的位置。

  • layerDB(图层数据库)

    //注册图层到layerDB中
    geoengine.layerDB.register('polyline', polylineLayer, 1) //图层名, 图层实例, 查询优先级
     
    //绑定点击图像事件
    geoengine.layerDB.on('clickobject', function (obj, layer, containerPoint) {
        console.log(obj, layer, containerPoint) //分别为feature数据, 所属图层, 鼠标相对于map的位置
    })

React Usage

  • HeatLayer

  • ScatterLayer

  • BubbleLayer

  • AdminDistrictLayer

  • SymbolLayer

  • GridHeatLayer

  • PolylineLayer

  • PolygonLayer

    import React, { Component, PropTypes } from 'react'
    import ReactDOM from 'react-dom'
    import ReactGeoEngine, { Datasource } from 'react-geoengine'
     
    class ReactExample extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return  <ReactGeoEngine.PolylineLayer {...this.props} />
    }
    }
     
    const domainAndRange = {
    range  : PropTypes.arrayOf(PropTypes.string),
    domain : PropTypes.arrayOf(PropTypes.number),
    }
     
    ReactExample.propTypes = {
    ds              : PropTypes.instanceOf(Datasource).isRequired,
    storke          : PropTypes.shape(domainAndRange),
    strokeWidth     : PropTypes.number,
    fill            : PropTypes.shape(domainAndRange),
    onClickObject   : PropTypes.func,
    onAddToMap      : PropTypes.func,
    onRemoveFromMap : PropTypes.func,
    layerDBIndex    : PropTypes.number,
    name            : PropTypes.string
    }
     
    export default ReactExample
     

  • LayerDB的设置也通过props传入

  • CircleRangeLayer有些许不同，作为一个强交互的图层，事件直接通过props传入，不需要加on关键字。

非WebGL图层使用(deprecated 不推荐使用)

基础通用配置介绍

GeoEngineSDK在做样式渲染时，提供了大量的可配置参数给用户，以下就针对通用的配置参数做一个介绍，之后在用到的图层中，只介绍个性化的配置，通用配置就不再重复介绍

  • 数据源配置

    ds : geoengineDS // 除了TileLayer其他的图层都需要和数据绑定，ds参数就是指定绑定的数据源

  • 指定数据值字段

    valueName: 'cnt'

    or

    getValue(feature) {
      return feature.properties.cnt + feature.properties.id
    },

  • 填充色彩配置

    fill : {
      domain: [0, 1000, 2000, 3000],
      range: ['rgb(0, 167, 157)', 'rgb(255, 250, 0)', 'rgb(255, 162, 0)', 'rgb(200, 7, 0)']
    }
    //上面色彩值映射关系如下：<=0:'rgb(0, 167, 157)';<=1000:'rgb(255, 250, 0)';<=2000:'rgb(255, 162, 0)';<=3000:'rgb(200, 7, 0)'

    或者

    fill:'rgb(0, 167, 157)'

  • 线的色彩值

    stroke: {
        domain: [1,2,3,4],
        range: ['rgb(0, 167, 157)', 'rgb(255, 250, 0)', 'rgb(255, 162, 0)', 'rgb(200, 7, 0)'],
    }//映射关系逻辑同上

    或者

    stroke:'rgb(0, 167, 157)'

数据源

BaseDatasource(数据源基类, 下面所有数据源均是BaseDatasource的子类)

  • 适用场景: 自定义Datasource

  • API(所有子类均继承下面方法, 当需要抛出事件时使用emitLoadXXX方法, 而不是emit(....)):

    API 返回 描述
    setProps(props: Any) 无 设置datasource属性
    request() Promise<请求结果> 请求数据, 会根据所处生命周期抛出事件, 生命周期为 loadstart -> 若干个loaddata -> load, loaddata期间出错则抛出loaderror事件
    on(event: String, handler: Function) 无 监听事件
    emitLoadStart(rid: String) 无 发送loadstart事件
    emitLoadData(rid: String, data: Any) 无 发送loaddata事件
    emitLoad(rid: String) 无 发送load事件
    emitLoadError(rid: String, err: Any) 无 发送loaderror事件
    destroy() 无 销毁数据源, 移除所有监听函数

  • 事件(所有子类均会抛出下面事件)

    事件 事件参数 描述
    loadstart [rid:String] 请求开始
    loaddata [rid:String, data:Any] 请求数据返回
    load [rid:String] 请求结束
    loaderror [rid:String, err:Any] 请求出错

  • EXAMPLES:

    ds.on('loadstart', info => console.log(`start loading data:${info}`)) //数据开始加载  
    ds.on('load', info => console.log(`loading data: ${info}`)) // 数据加载中  
    ds.on('loaddata', data => console.log(`loading data done:${JSON.stringify(data)}`)) //数据加载完成  
    ds.on('loaderror', error => console.error(`loading data error:${error}`)) // 数据加载出错  

GeoEngineDatasource(GeoEngine数据源)

  • 适用场景: 请求GAS数据

  • API

    特有API 返回 描述
    preload() Promise<请求结果> 预加载数据而不会触发loadstart, loaddata, load事件
    setTemplate(template: Function) 无 设置解析模板

  • EXAMPLES:

    const transforms = [{name: 'type', value: 'geojson'}]
    const filter = [{name: 'sql', value: 'select * from t1'}]
    const geoengineDs = new geoengine.GeoEngineDatasource({
        id: '124',
        version: 'v1',
        baseUrl: '//ip:port',
        token: '********',
        transforms,
        filter,
        extent: {
          geohashes: ['1', '2', '3']
        }
    })

HttpDatasource (http数据源)

  • 适用场景: 请求普通http数据

  • API

    特有API 返回 描述
    preload() Promise<请求结果> 预加载数据而不会触发loadstart, loaddata, load事件

  • EXAMPLES:

    const ds = new geoengine.HttpDatasource({
      url: 'http://xxx.com',
      //可选
      headers: {},
      //可选
      credentials: "same-origin",
      //可选
      method: 'GET',
      //可选
      body: '',
      //可选
      parseData: function (data) {
        if (data === null) return data
        if (data.isError == void 0) return data
        if (data.isError) throw data.error
        return data.data
      }
    })

MemoryDatasource(内存数据源)

  • 适用场景: 使用内存对象作为数据源

  • API

    特有API 返回 描述
    setData() 无 预加载数据而不会触发loadstart, loaddata, load事件, 如需触发请调用request函数

  • EXAMPLES:

    const ds = new geoengine.MemoryDatasource({
      data: {
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "geometry": {
              "type":"LineString",
              "coordinates":[
                [120.15, 30.27],[120.16, 30.28],[120.17, 30.27],[120.16, 30.26],[120.15, 30.27]
                ]
              },
            "properties": {
              "level": 1
            }
          }
        ]
      }
    })

MixDatasource(混合数据源)

  • 适用场景: 需要结合多个基础数据源生成新的数据源

  • API

    特有API 返回 描述
    setDsMap(map: Map<String,BaseDatasource>) 无 设置数据源Map
    addDs(key: String, datasource: BaseDatasource) 无 添加基础数据源到混合数据源中
    removeDs(key: String) 无 从混合数据源中移除指定基础数据源

  • EXAMPLES:

    const shapefileDs = new geoengine.HttpDatasource({
      url: "/examples/shapefile.json"
    })
     
    const dynamicDs = new geoengine.HttpDatasource({
      url: "/examples/shapefile-dynamic.json"
    })
     
    const mixDs = new geoengine.MixDatasource({
      dsMap: {
        shapefile: shapefileDs,
        dynamic: dynamicDs,
      },
      parseData(dataMap) {
        const shapefile = dataMap["shapefile"]
        const dynamic = dataMap["dynamic"]
        if (shapefile == void 0 || dynamic == void 0) return
        const layerData = JSON.parse(dynamic[0].layer_data)
        const features = shapefile.features.map((feature) => {
          const linkID = feature.properties.linkId
          const speeds = layerData[linkID] || [90]
          // console.log(speeds)
          return {
            ...feature,
            properties: {
              ...feature.properties,
              ROADCLASS: 410000,
              traffic_0: speeds[0],
            }
          }
        })
        return {features}
      }
    })

Readme

Keywords

Package Sidebar

Install

npm i gas.gl

Weekly Downloads

8

Version

3.5.45

License

ISC

Unpacked Size

5.15 MB

Total Files

9

Last publish

Collaborators

  • taozhi.tz
  • wanyi.css
Try on RunKit
Report malware