gas.gl

v3.5.45

Published

2 years ago

HighPerformance Geojson Data Render with WebGL

Downloads

0High
0Medium
0Low

taozhi.tz

wanyi.css

leaflet vector geojson topojson protobuf openlayer

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']
效果图

工具

当需要和页面做交互的时候，例如点击道路，出现具体的路况数据，而当有多个图层叠加的时候，需要确认图层数据查找的先后顺序，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'

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

GeoEngineSDK USAGE

import

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

通用说明

瓦片配置及使用示例

TileLayer(静态瓦片)

bubbleLayer(气泡图）

gridHeatLayer(栅格图)

HoneyCombLayerGL(蜂窝)

BezierCurveLayer(贝塞尔曲线)

ScatterLayerGL(麻点图)

heatLayer(热力图)

adminDistrictLayer(区划热力图)

markerLayer(自定义marker图)

MarkerCluster(聚合图)

polylineLayerGL(折线图)

TripLayerGL(轨迹图)

PolygonLayerGL(多边形）

symbolLayer(标注图)

circleRangeLayer(圈选)

工具

React Usage

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

基础通用配置介绍

数据源

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

GeoEngineDatasource(GeoEngine数据源)

HttpDatasource (http数据源)

MemoryDatasource(内存数据源)

MixDatasource(混合数据源)

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