Datav.GI 通用gis引擎
项目结构
src
├── GiViewer.js // gi渲染入口
├── Map.js // Map 入口
├── animation //动画管理
├── baseMaps
│ └── vogo //vogo基础底图
├── config //配置项
├── cover // shader扩展
│ ├── antiShake.js
│ ├── colorPick.js
│ └── shaderCover.js
├── extension //扩展能力
│ └── mapboxStyle //mapbox style 解析
├── geo //地理坐标转换工具
├── geometries //通用几何体基类
│ └── StyleGeometry.js
├── glyph //字体管理
│ └── GlyphManager.js
├── imageSource //图标管理
│ └── ImageManager.js
├── index.js //项目入口
├── materials //通用材质
│ ├── AntiShakeMaterialWrapper.js
│ └── StyleMaterial.js
├── pick //拾取能力
│ ├── GpuPickRender.js
│ ├── Pick.js
│ └── PickMaterial.js
├── postRender //后期处理
│ ├── FogPass.js
│ ├── PostRenderer.js
│ └── PostScanRenderer.js
├── primitives //图元包
│ ├── LayerManager.js //图层管理
│ ├── Primitive.js //通用图元基础类
│ ├── fill //填充
│ │ ├── Fill.js
│ │ ├── Geometry.js
│ │ ├── Material.js
│ │ └── shaders
│ ├── line //线条
│ │ ├── Geometry.js
│ │ ├── Line.js
│ │ ├── Material.js
│ │ └── shaders
├── sources //数据源管理
│ ├── GeoJSON.js
│ ├── Geobuf.js
│ ├── Source.js
│ ├── SourceManager.js
│ └── Vector.js
├── utils //工具库
└── worker //多线程管理
├── InvokingTask.js
├── WorkerScheduler.js
├── WorkerWrapper.js
└── main.worker.js
克隆
git clone git@gitlab.alibaba-inc.com:yongju.hy/datav-gi-js.git
安装依赖包
cd data-gi-js
npm install
启动
npm start
打包
npm run build
启动完成后访问地址: http://localhost:9100/webpack-dev-server/
初始化GI 地图
let map = new datavgi.Map("container",{
center:[121.9449298760868,30.901014400230366],
zoom:12.107163593052736,
crs:"EPSG:3857",
pitch:0,
rotate:0
})
添加图层
map.addLayer({
id:"area",
type:"fill",
style:{
color:"red",
opacity:1
},
source:{
type:"geojson",
data:{
type:"FeatureCollection",
features:[
...
]
}
}
})