gis-one-piece
v0.1.22
Published
> packages/core是组件库代码，导出组件列表在src/index.js中。 > playground是测试组件代码，在main.js中可切换引入本地组件或者npm包组件 ## gis-one-piece包为组件库，导出以下组件， ### 一、组件1：GisContainer > GisContainer为核心基础组件，主要作用是初始化地球，绑定点击事件，提供如飞行到指定点位，标注避让，标注文字滑上显示等。 #### 1.1 在初始化地球时，以下代码需要注意。可参考playground/src/
Readme
gis-one-piece 组件 使用文档说明
packages/core是组件库代码，导出组件列表在src/index.js中。 playground是测试组件代码，在main.js中可切换引入本地组件或者npm包组件
gis-one-piece包为组件库，导出以下组件，
一、组件1：GisContainer
GisContainer为核心基础组件，主要作用是初始化地球，绑定点击事件，提供如飞行到指定点位，标注避让，标注文字滑上显示等。
1.1 在初始化地球时，以下代码需要注意。可参考playground/src/App.vue
// CResource的属性名称不得修改
window.CResource = {
Viewer: null,
ImageryReSource: [],
PolygonEntityReSource: [],
PointEntityReSource: {}, // 单个点的实体
pointPopup: null,
TerrainReSource: [],
S3MTilesByScpReSource: [],
}
/*
Viewer是超图三维场景顶层对象
ImageryReSource的子元素数据格式如下：
{
resource: provider, // 当前图层的provider对象
feature: tempNode, // 当前图层渲染时的option
}
PointEntityReSource的数据格式如下：
{
'规划-用地规划潜在位置': [], // key是当前图层的name，value是此图层下的所有点的集合
}
*/
// 必须provide，否则gis组件找不到CResource
provide('CResource', CResource)1.2 超图右键添加、编辑、删除点位，添加和编辑点位时需要注意图片和颜色数据由使用者传入。可有个默认图片和颜色数据。
1.3 相机视角远近只影响路线模型展示和深度检测。
1.4 鼠标点击单个点位时高亮，高亮策略暂定换图片和文字颜色。
1.5 UI图左侧和右侧面板不包括在组件内，但是后期会把宁香项目左右侧内容抽出为组件以快速搭建项目。
1.6 单个点位信息面板不包括在组件内，但是后期会把宁香项目单个点位信息面板内容抽出为组件以快速搭建项目。
1.7 页面底部的图层控制仅有基础图层属于组件内，如一总包之类的节点暂不属于组件。
1.8 图例不属于组件。
1.9 名称和桩号查询不属于组件。
1.10 此组件库下的所有组件在使用时均需放在GisContainer下作为其子节点。
1.11 props如下：
| props名称 | 描述 | 数据格式 | |-------|-------|-------| | initGlobeMapSetting | 初始化地球的设置选项 | [见此表下方解释] | | isBindScreenLeftClick | 绑定左键 | [见此表下方解释] |
// initGlobeMapSetting 数据结构如下：
initGlobeMapSetting: {
type: Object,
default: () => ({
elementIdStr: 'gis-one-piece-container-element', // 超图绑定的元素id
otherViewerOptions: {}, // 初始化Viewer时的选项
initGlobeMapBeforeHandle: (() => {}), // 初始化Viewer前进行的一些设置
}),
}
// isBindScreenLeftClick 数据结构如下：
isBindScreenLeftClick: {
type: Boolean,
default: () => true,
}1.12 暴露出来的事件如下：
| 事件名称 | 描述 | 返回参数 | |-------|-------|-------| | initSuperMapSuccess | 渲染完地球后的回调 | 无 | | screenLeftClick | 左键点击 | { pickedObject, position, movement } | | mouseMovePickEntity | 鼠标移动拾取到实体 | pickedEntity | | addMarker | 右键新增标注 | {longitude, latitude, height} | | editMarker | 右键编辑标注 | currentOperateId | | deleteMarker | 右键删除标注 | currentOperateId |
1.13 暴露出来的方法如下：
| 方法名称 | 描述 | 传入参数 | 返回值 | |-------|-------|-------|-------| | flyToView | 统一的相机移动方法 | view，[具体结构见表下面解释] || | getCameraHeight | 获取相机高度 | CResource | height |
// view数据结构
const defaultViewOptions = {
lon: 100.00448576473048,
lat: 27.6962143870219,
height: 11810.187572294712,
heading: 6.246959648078806,
pitch: -1.3048173749553684,
roll: 6.282776819915696,
duration: 3,
}二、组件2：LayersManage
LayersManage组件主要作用为渲染默认资源，包括iserver各种类型资源以及标注点位。其中iserver各种类型资源渲染细节在readme_GisConstructor.md中。
由于导航组件放在页面底部，故此组件不作为UI组件使用，仅作为使用者传递数据，组件内会自动解析数据并加载渲染数据
2.1 LayersManage组件的layersManageTreeData属性实例及说明如下。也可参考playground/src/mockData/LayersListMockData.js文件。
2.2 layersManageTreeData属性中单个点位类节点、多个点位类节点、资源类节点（有iserver url的节点）是叶子节点
const nodeField = {
hasChildren: true, // 是否有下级子节点 用于懒加载子级
id: 1, // 节点唯一id
name: "土地现状层", // 节点名称
// 此节点类型
// parent表示是父节点，父节点没有点位数据和资源数据
// onePoint表示单个点位，若是单个点位则点击后跳转到对应位置，poiRefs字段表示此节点的点位数据
// generalContractor表示总包节点，点击总包节点跳转到该总包视角
// iserver表示超图iserver节点和天地图节点，mapServerRefs字段表示此节点的资源数据，urlParams字段表示此节点的渲染参数数据
nodeTypeValue: 'onePoint',
defaultView: -1, // 只对iserver节点有效，是否展示在Globe中,-1表示不展示，1表示为最上面，2为1的下面，3为2的下面，依次类推
checked: false, // 是否勾选
resourceType: '', // 资源类型 ImageryReSource TerrainReSource PointEntityReSource S3MTilesByScpReSource
iconImgSrc: '', // 显示在导航的icon图片src
showEye: false, // 显示在导航处时是否显示眼睛图标
mapServerRefs: { // iserver服务数据
url: "https://glsjbimcon.yciccloud.com:8090/iserver/services/map-wmts-5/wmts-china", // iserver服务url
// iserver服务type
// iserver.wmts_china_rest 表示wmts服务
// iserver.terrain_rest 表示地形服务
// iserver.tianditu.cia_c 表示天地图-全球中文注记服务
// iserver.tianditu.img_c 表示天地图-全球影像地图服务
// iserver.tianditu.vec_c 表示天地图-全球矢量地图服务
// iserver.tianditu.ter_c 表示天地图-全球矢量地图服务
// online.esri.arcgis_world_img17 表示ArcGis-Esri-开源影像（标清）
// online.template_img_rest 表示template-Esri-开源影像（高清）
// iserver.s3mtile_scp 表示s3mtile-模型
// iserver.wms 表示wms服务
// iserver.ugc 表示ugc服务
// iserver.wfs_100_rest 表示wfs服务
type: "iserver.wmts_china_rest",
token: "f7d21d8b97d89bee093ffbadd459990a", // 天地图token
layers: '', // 图层名称 在wms中有用到
},
poiRefs: { // 点位数据
geometry: [101.70481967,26.035108922, 2595.6791459135575], // 点位经纬度，高度
type: '服务设施', // 点位类型
renderOption: {}, // 渲染点位时的参数 必需
layerName: '', // 若是单个点位则表示此点位的名称，若是多个点位组成的图层则表示图层名称(如iserver.wfs_100_rest服务) 必需
displayLevel: 1, // 单个点位显示层级，1-9级
},
urlParams: { // wfs、wmts参数 wmts是影像 wfs经过fetch后提供点位数据
/* wmts参数 */
layer: 'lm-land-out-fwq-v1218', // wmts参数
style: 'default', // wmts参数
format: 'image/png', // wmts参数
tileMatrixSetID: '', // wmts参数
credit: 'YCIC-YJSJ-Technology', // wmts参数
maximumLevel: '19', // wmts参数
// wmts参数
// EPSG:4326是WGS84地理坐标系，对应值为new Cesium.GeographicTilingScheme({ellipsoid: Cesium.Ellipsoid.WGS84})
// "EPSG:3857"是Web墨卡托投影，对应值为new Cesium.WebMercatorTilingScheme()
tilingScheme: "EPSG:4326",
/* wfs参数 */
service: 'WFS', // wfs参数
version: '1.0.0', // wfs参数
request: 'GetFeature', // wfs参数
typeName: 'WFS:lvmei_lm-land-out-jtsydk-center-v1221', // wfs参数
outputFormat: 'application/json', // wfs参数
// wfs参数
// EPSG:4326是WGS84地理坐标系
// "EPSG:3857"是Web墨卡托投影
srsName: 'EPSG:4326',
bbox: '97.77216339111328,21.252513885498047,106.1427993774414,28.608224868774414', // wfs参数
/* wms参数 */
rectangle: {
rectangleendlat: 27.8445,
rectangleendlon: 101.825,
rectanglestartlat: 26.2789,
rectanglestartlon: 99.6503,
},
parameters: {
format: 'image/png',
transparent: true,
crs: 'EPSG:3857',
},
},
children: [], // 子节点
}
const nodeFieldDemo = {
hasChildren: true,
id: 3,
name: "底图基础层",
mapServerRefs: {},
poiRefs: {},
children: [
{
hasChildren: false,
id: 4,
name: "wmts-云南边界",
mapServerRefs: {
url: 'https://glsjbimcon.yciccloud.com:8090/iserver/services/map-wmts-5/wmts-china',
type: 'iserver.wmts_china_rest',
urlParams: {
"credit": "YCIC-YJSJ-Technology",
"format": "image/png",
"layer": "lm_base_yunnan_boundary",
"maximumLevel": 19,
"style": "default",
"tileMatrixSetID": "ChinaPublicServices_lm_base_yunnan_boundary",
"tilingScheme": "EPSG:4326"
},
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 5,
name: "地形",
mapServerRefs: {
url: 'https://glsjbimcon.yciccloud.com:8090/iserver/services/3D-yunnan_base_publish/rest/realspace/datas/yunnan_dem_wgs84%40wgs84_%E6%95%B0%E6%8D%AE%E6%BA%90',
type: 'iserver.terrain_rest',
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 14,
name: "苏家庄隧道地形",
mapServerRefs: {
url: 'https://glsjbimcon.yciccloud.com:8090/iserver/services/3D-local3DCache-HeBing1_20260120_4490test/rest/realspace/datas/%E5%90%88%E5%B9%B61_20260120_4490@test',
type: 'iserver.terrain_rest',
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 6,
name: "天地图sm-全球中文注记服务",
mapServerRefs: {
url: 'CIA_C',
type: 'iserver.tianditu.cia_c',
token: "f7d21d8b97d89bee093ffbadd459990a",
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 7,
name: "天地图sm-全球影像地图服务",
mapServerRefs: {
url: 'IMG_C',
type: 'iserver.tianditu.img_c',
token: "f7d21d8b97d89bee093ffbadd459990a",
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 8,
name: "天地图sm-全球矢量地图服务",
mapServerRefs: {
url: 'VEC_C',
type: 'iserver.tianditu.vec_c',
token: "f7d21d8b97d89bee093ffbadd459990a",
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 9,
name: "天地图sm-全球地形地图服务",
mapServerRefs: {
url: 'TER_C',
type: 'iserver.tianditu.ter_c',
token: "f7d21d8b97d89bee093ffbadd459990a",
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 10,
name: "ArcGis-Esri-开源影像（标清）",
mapServerRefs: {
url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
type: 'online.esri.arcgis_world_img17',
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 11,
name: "template-Esri-开源影像（高清）",
mapServerRefs: {
url: 'https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=AAPKe2b57a40e4744c2e8595243dbdd7b2behCc4fIPuxORpch9ruOmWtyu3tsIxneD_O-1J2i9KAogQnE7_9Nl5gDhPJsKXsmqp',
type: 'online.template_img_rest',
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 13,
name: "s3mtile-设计三标全线模型",
mapServerRefs: {
url: 'https://glsjbimcon.yciccloud.com:8090/iserver/services/3D-local3DCache-NXGS_SJ3_AllProperty/rest/realspace/datas/NXGS_SJ3_AllProperty/config',
type: 'iserver.s3mtile_scp',
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 13,
name: "s3mtile-大保高速老板段宝石山隧道排风塔模型",
mapServerRefs: {
url: 'https://glsjbimcon.yciccloud.com:8090/iserver/services/3D-local3DCache-FengTaWenJian/rest/realspace/datas/%E9%A3%8E%E5%A1%94%E6%96%87%E4%BB%B6/config',
type: 'iserver.s3mtile_scp',
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 15,
name: "wms-公水联运",
mapServerRefs: {
url: 'https://glsjbimcon.yciccloud.com:8090/iserver/services/map-wms/wms130/GeoServer%20Web%20Map%20Service?MAP=GeoServer+Web+Map+Service&',
type: 'iserver.wms',
layers: 'NXGS_公水联运',
urlParams: {
rectangle: {
rectangleendlat: 27.8445,
rectangleendlon: 101.825,
rectanglestartlat: 26.2789,
rectanglestartlon: 99.6503,
},
parameters: {
format: 'image/png',
transparent: true,
crs: 'EPSG:3857',
},
},
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 16,
name: "ugc-九总包-进场道路",
mapServerRefs: {
url: 'https://glsjbimcon.yciccloud.com:8090/iserver/services/map-ugcv5-T9ZongBao_DuLiZuoBiaoXi_4490NXGS_JinChangDaoLu/rest/maps/T9%E6%80%BB%E5%8C%85_%E7%8B%AC%E7%AB%8B%E5%9D%90%E6%A0%87%E7%B3%BB__4490%40NXGS_JinChangDaoLu',
type: 'iserver.ugc',
},
poiRefs: {},
children: [],
},
{
hasChildren: false,
id: 16,
name: "风塔-倾斜摄影",
mapServerRefs: {
url: 'https://glsjbimcon.yciccloud.com:8090/iserver/services/3D-local3DCache-dabao_fengta/rest/realspace/datas/dabao_fengta/config',
type: 'iserver.s3mtile_scp',
},
poiRefs: {},
children: [],
},
],
}2.3 暴露出来的方法如下：
| 事件名称 | 描述 | 传入参数 | |-------|-------|-------| | initExtractData | 抽取数据并加载渲染资源 | data，[具体结构见2.2中的nodeFieldDemo、nodeField] |
三、组件3：LayersTools
LayersTools组件为小工具组件。每一个小工具可设置显隐。
3.1 工具栏功能有：3D/2D、深度检测、地形透明度、恢复初始视角、测量工具。
3.2 3D/2D，切换到2D是隐藏所有3D资源。
3.3 深度检测手动开启后则一直开启深度检测功能。若没有手动开启，则一定远距离后自动开启，自动开启后深度检测小图标不高亮，一定近距离后自动关闭。
3.4 props如下：
| props名称 | 描述 | 数据格式 | |-------|-------|-------| | defaultViewOptions | 默认视角 | [见此表下方解释] | | hideSaveView | 显隐保存视角按钮 | [见此表下方解释] |
// defaultViewOptions 数据结构如下：
const defaultViewOptions = {
lon: 100.00448576473048,
lat: 27.6962143870219,
height: 11810.187572294712,
heading: 6.246959648078806,
pitch: -1.3048173749553684,
roll: 6.282776819915696,
duration: 3,
}
// hideSaveView 数据结构如下：
hideSaveView: {
type: Boolean,
default: true
}3.5 暴露出来的事件如下：
| 事件名称 | 描述 | 返回参数 | |-------|-------|-------| | saveCameraView | 保存当前相机视角 | 当前视角信息 |
3.6 暴露出来的方法/属性如下：
| 方法/属性名称 | 描述 | 传入参数 | |-------|-------|-------| | tools | 工具条数组 | |
四、组件4：GisNav
GisNav组件为 页面底部导航组件
4.1 暴露出来的事件如下：
| 事件名称 | 描述 | 数据格式 | |-------|-------|-------| | navItemClick | navItem点击，一级和二级节点 | navItemData，节点数据 |
4.2 暴露出来的方法如下：
| 方法名称 | 描述 | 传入参数 | |-------|-------|-------| | initNav | 初始化导航 | data，树形结构的导航数据，节点数据结构如nodeField |
五、组件5：NavItem
NavItem组件
六、组件6：NavMore
NavMore组件为导航条中的更多组件