3.5.45 • Published 4 years ago

gas.gl v3.5.45

Weekly downloads
10
License
ISC
Repository
gitlab
Last release
4 years ago

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
    }
    }]
}
})

  • 配置项

    OptionTypeDefaultDescription
    radiusNumber/Objectnull气泡半径大小
    fillString/Objectnull气泡背景填充色
    gapNumber3填充颜色内圈和外圈之间的间隔，可认为是内圈半径等于radius减去gas得到内圈半径进行fill
    valueNameString'value'数据中用来渲染图层所用的值
    fontObjectnull设置气泡图上的字体的大小和颜色
    getValueFunction(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
    }
}]
}

  • 默认项

    OptionTypeDefaultDescription
    cellSizeNumber500以米为单位的每个单元的大小
    visibleBooleantrue是否可见
    opacityNumber1透明度
    pickableBooleantrue图层是否响应鼠标指针拾取事件
    coverageNumber1取值范围0-1,单元格的最终大小通过coverage * cellSize计算
    highlightColorArray255, 255, 255, 255RGBA颜色用于渲染突出显示的对象
    autoHighlightBooleanfalse鼠标指针（悬停时）用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
    }
}]
}

  • 配置项

    OptionTypeDefaultDescription
    pickableBooleantrue图层是否响应鼠标指针拾取事件
    opacityNumber1透明度
    visibleBooleantrue是否可见
    colorDomainArraymin(count), max(count)counts分界值
    colorRangeArray[255,255,178,254,217,118,254,178,76,253,141,60,240,59,32,189,0,38]counts分界值映射的颜色范围
    radiusNumber100以米为单位的六角仓的半径
    coverageNumber1取值范围0～1. 六边形的最终半径计算coverage * radius
    highlightColorArray255, 255, 255, 255RGBA颜色用于渲染突出显示的对象
    autoHighlightBooleanfalse鼠标指针（悬停时）用highlightColor高亮显示
    setHoneyCombColorFunctionnull设置蜂窝背景色

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
    }
    }]
}
})

  • 配置项

    OptionTypeDefaultDescription
    curvenessNumber0.2曲度
    endArrowObjectmap.zoom目前只支持一个length key,表示终点箭头长度
    strokeWidthNumber3线宽
    startCircleObject{strokeWidth:1, radius:2, fill:'rgb0, 0, 0'}起始点圆圈属性设置
    strokeDashArrayFunction/Arraynull线条样式
    fillObjectnull背景色
    strokeObject/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
    }
}]
}

  • 配置项

    OptionTypeDefaultDescription
    pickableBooleantrue图层是否响应鼠标指针拾取事件
    visibleBooleantrue是否可见
    opacityNumber1透明度
    outlineBooleanfalseOnly draw outline of points
    strokeWidthNumber5麻点边宽
    radiusMinPixelsNumber1The minimum radius in pixels
    radiusMaxPixelsNumberNumber.MAX_SAFE_INTEGERThe maximum radius in pixels
    radiusScaleNumber10A global radius multiplier for all points
    autoHighlightBooleanfalse鼠标指针（悬停时）用highlightColor高亮显示
    highlightColorArray255, 255, 255, 255RGBA颜色用于渲染突出显示的对象
    radiusNumber5半径
    setScatterColorFunctionnull设置麻点背景色
    setRadiusFunctionnull设置麻点半径
    fillObject/Stringnull设置麻点背景色
    valueNameString'value'数据中用来渲染图层所用的值
    getValueFunction(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
    }
    }]
}
})

  • 配置项

    OptionTypeDefaultDescription
    blurNumber3光晕尺寸
    radiusNumber5半径大小
    fillObjectnull光晕背景色
    valueNameString'value'数据中用来渲染图层所用的值
    unitString'pixel'支持meter(米)、arc(度)、pixel(像素)三种
    minPixelNumber1当unit为arc或meter的时候，该配置生效,并且表示当zoom缩放级别很小时，最小的像素尺寸
    minOpacityNumber0.1光晕最小透明度
    getValueFunction(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
    }
    }]
}
})

  • 配置项

    OptionTypeDefaultDescription
    urlObjectnull城市、省份svg链接地址
    fillObjectnull背景色
    valueNameString'value'数据中用来渲染图层所用的值
    getValueFunction(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: {}
    }]
}
})

  • 配置项

    OptionTypeDefaultDescription
    renderFeatureFunctionfeature => {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标注默认展示内容
    renderPopupFunctionfeature => {return null}渲染marker click后弹出层
    renderTooltipFunctionfeature => {return null}渲染marker hover后弹出层
    opacityNumber1透明度

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: {}
}]
}

  • 配置项

    OptionTypeDefaultDescription
    radiusNumber80marker半径
    visibleBooleantrue是否可见
    extentNumber256瓦片范围, 相对于此值计算半径
    maxZoomNumber16聚合的最大级别
    minZoomNumber0聚合的最小级别
    nodeSizeNumber64KD树叶节点的大小。影响性能
    customMarkerFunction(feature, latlng) => L.marker(latlng)渲染单点marker
    customClusterMarkerFunction渲染聚合marker
    initialClusterFunction值初始化,供mapCluster、reduceCluster函数中使用
    mapClusterFunctioninitialCluster中初始化值和properties值做映射
    reduceClusterFunction计算结果存放在最终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: {}
}]
}

  • 配置项

    OptionTypeDefaultDescription
    strokeWidthNubmernull线宽
    fp64Booleanfalse图层是否应以高精度64位模式呈现
    miterLimitNubmer4The maximum extent of a joint in ratio to the stroke width. Only works if rounded is false
    widthScaleNubmer1the path width multiplier that multiplied to all paths
    widthMinPixelsNubmer0The minimum path width in pixels
    widthMaxPixelsNubmerNumber.MAX_SAFE_INTEGERThe maximum path width in pixels
    pickableBooleantrue图层是否响应鼠标指针拾取事件
    opacityNubmer1透明度
    visibleBooleantrue是否可见
    roundedBooleanfalseType of joint. If true, draw round joints. Otherwise draw miter joints
    autoHighlightBooleanfalse鼠标指针（悬停时）用highlightColor高亮显示
    highlightColorArray255, 255, 255, 255RGBA颜色用于渲染突出显示的对象
    valueNameString'value'数据中用来渲染图层所用的值
    strokeString/Objectnull线条颜色
    getDashArrayFunctionnullthe dash array to draw each path with: dashSize, gapSize relative to the width of the path
    setLineColorFunctionnull设置线条颜色
    getValueFunctionnull返回用来渲染图层所用的值
    coordinateSystemFunctionnullSpecifies how layer positions and offsets should be geographically interpreted.
    coordinateOriginFunctionnullSpecifies 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: {}
}]
}

  • 配置项

    OptionTypeDefaultDescription
    pickableBooleantrue图层是否响应鼠标指针拾取事件
    opacityNubmer1透明度
    visibleBooleantrue是否可见
    trailLengthNubmer120线尾长
    strokeWidthNubmernull线宽
    setColorFunctionnull设置线条颜色

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: {}
}]
}

  • 配置项

    OptionTypeDefaultDescription
    strokeWidthNumber1线宽
    pickableBooleantrue图层是否响应鼠标指针拾取事件
    opacityNumber1透明度
    visibleBooleantrue是否可见
    lineWidthMaxPixelsNumberNumber.MAX_SAFE_INTEGERThe maximum line width in pixels
    lineWidthMinPixelsNumber1The minimum line width in pixels
    lineWidthScaleNumber1The line width multiplier that multiplied to all lines
    lineJointRoundedBooleanfalseType of joint. If true, draw round joints. Otherwise draw miter joints
    lineMiterLimitNumber4The maximum extent of a joint in ratio to the stroke width. Only works if lineJointRounded is false
    fp64BooleanfalseWhether the layer should be rendered in high-precision 64-bit mode
    filledBooleantrue是否渲染背景色
    strokedBooleanfalse是否渲染多边形边
    autoHighlightBooleanfalse鼠标指针（悬停时）用highlightColor高亮显示
    highlightColorArray255, 255, 255, 255RGBA颜色用于渲染突出显示的对象
    valueNameString'value'数据中用来渲染图层所用的值
    getValueFunction返回用来渲染图层所用的值
    setLineColorFunction设置线条颜色
    setFillColorFunction设置多边形填充色
    setLineWidthFunction设置线宽

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}
    }]
}
})

  • 默认项

    OptionTypeDefaultDescription
    symbolObject{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}标注信息配置
    valueNameString'value'数据中用来渲染图层所用的值
    getValueFunction返回用来渲染图层所用的值

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()无销毁数据源, 移除所有监听函数
  • 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}
  }
})
leafletvectorgeojsontopojsonprotobufopenlayer
@turf/bearing@turf/helpers@turf/inside@turf/invariant@turf/turfblueimp-md5deck.gleventemitter3gl-mat4gl-matrixgl-vec2gl-vec4isomorphic-fetchjsdomleaflet.tilelayer.colorfilterleaflet.vectorgridluma.glpromise-helperprop-typesramdareact-leaflet-markerclustersimpleheatsuperclustertopojsonviewport-mercator-project
@infinitebrahmanuniverse/nolb-gas@everything-registry/sub-chunk-1720
3.5.45

4 years ago

3.5.44

4 years ago

3.5.43

4 years ago

3.5.42

4 years ago

3.5.41

4 years ago

3.5.40-beta

4 years ago

3.5.39-beta

4 years ago

3.5.38-beta

4 years ago

3.5.37-beta

4 years ago

3.5.35-beta

4 years ago

3.5.36-beta

4 years ago

3.5.34-beta

4 years ago

3.5.33-beta

4 years ago

3.5.32-beta

4 years ago

3.5.31-beta

4 years ago

3.5.30-beta

4 years ago

3.5.29-beta

4 years ago

3.5.28

4 years ago

3.5.27

4 years ago

3.5.26-beta

4 years ago

3.5.26

4 years ago

3.5.25

4 years ago

3.5.24

4 years ago

3.5.23

4 years ago

3.5.22

4 years ago

3.5.21

4 years ago

3.5.20

4 years ago

3.5.19

4 years ago

3.5.18

5 years ago

3.5.17

5 years ago

3.5.16-beta

5 years ago

3.5.12-beta

5 years ago

3.5.16

5 years ago

3.5.15

5 years ago

3.5.14

5 years ago

3.5.13

5 years ago

3.5.12

5 years ago

3.5.11

5 years ago

3.5.10

5 years ago

3.5.9

5 years ago

3.5.8

5 years ago

3.5.7

5 years ago

3.5.6

5 years ago

3.5.5

5 years ago

3.5.4

5 years ago

3.5.3

5 years ago

3.5.2

5 years ago

3.5.1

5 years ago

3.5.0

5 years ago

3.4.1

5 years ago

3.4.0

5 years ago

3.3.38-beta

5 years ago

3.3.37-beta

5 years ago

3.3.36-beta

5 years ago

3.3.35-beta

5 years ago

3.3.34-beta

5 years ago

3.3.33-beta

5 years ago

3.3.32-beta

5 years ago

3.3.31-beta

5 years ago

3.3.30-beta

5 years ago

3.3.29-beta

5 years ago

3.3.28-beta

5 years ago

3.3.27-beta

5 years ago

3.3.26-beta

5 years ago

3.3.25-beta

5 years ago

3.3.24-beta

5 years ago

3.3.23-beta

5 years ago

3.3.22-beta

5 years ago

3.3.21-beta

5 years ago

3.3.20-beta

5 years ago

3.3.19-beta

5 years ago

3.3.18

5 years ago

3.3.17-beta

5 years ago

3.3.16-beta

5 years ago

3.3.16

5 years ago

3.3.15-beta

5 years ago

3.3.14

5 years ago

3.3.13

5 years ago

3.3.12

5 years ago

3.3.11-beta

5 years ago

3.3.10-beta

5 years ago

3.3.9-beta

5 years ago

3.3.8-beta

6 years ago

3.3.7

6 years ago

3.3.6-beta

6 years ago

3.3.5-beta

6 years ago

3.3.4-beta

6 years ago

3.3.4

6 years ago

3.3.3

6 years ago

3.3.2

6 years ago

3.3.2-beta

6 years ago

3.3.1

6 years ago

3.2.2

6 years ago

3.2.1

6 years ago

3.2.0

6 years ago

3.1.2

6 years ago

3.1.1

6 years ago

3.1.0

6 years ago

3.0.11

6 years ago

3.0.10

6 years ago

3.0.9

6 years ago

3.0.8

6 years ago

3.0.7

6 years ago

3.0.6

6 years ago

3.0.5

6 years ago

3.0.4

6 years ago

3.0.3

6 years ago

3.0.2

6 years ago