基于Vue的GIS组件GISView的API文档

GISView API

基于Vue的GIS组件

版本：1.2.x

2021.04.28

npm传送门
GISView API文档

起步

• 初始化vue项目

  vue tese demo
  

• 安装组件库

  npm install gisview
  

• 引用组件

  import 'gisview/dist/gisview.css'
  import GW from 'gisview'
  
  Vue.use(GW)
  

• 依赖组件

  import 'leaflet/dist/leaflet.js'
  import '@supermap/iclient-leaflet'
  

• 三维依赖。推荐第一种方式

  // index.html引用，下载WebGL包到public
  <link href="Cesium/Widgets/widgets.css" rel="stylesheet">
  <script type="text/javascript" src="Cesium/Cesium.js"></script>
  
  // ES6模块化引用，可能出现地球初始化闪烁
  import {S3MTilesLayer} from '../Build/Cesium/Cesium.js'
  import from '../Build/Cesium/Widgets/widgets.css'
  

• main.js

  import 'gisview/dist/gisview.css'
  import 'leaflet/dist/leaflet.css'
  import 'leaflet/dist/leaflet.js'
  import '@supermap/iclient-leaflet'
  import GW from 'gisview/dist/gisview.umd.js'
  
  Vue.use(GW)
  

示例场景和开发框架稍后放至github及gitee上

Map系列

需要new一个map对象当作参数传入

1. Arcgis矢量服务

// 默认加载一幅arcgisonline的矢量服务

值	含义	类型	默认值	校验
id	Dom名称	String	map	是
mapObj	map对象	Arcgis规范下的map对象	包含属性extent和logo值的Map对象	有
image-url	服务地址	String	''	是
extent	范围	Object	北京城区偏北	对象内部不校验
basemap	底图	String	''	是
logo	esri logo	Boolean	false	是
overview	鹰眼图	Boolean	false	是
expandFactor	鹰眼比例	Number	2	是
attachTo	鹰眼位置	String	top-right	是
divCss	Css样式	String	''	是

data() {
    return {
      mapObj: {},
      extent: {
        able: true,
        xmin: 114,
        ymin: 40,
        xmax: 118,
        ymax: 41,
        wkid: 4326
      }
    }
  }

// 默认值

2. Arcgis影像服务

// 默认加载一副arcgisonline的影像服务

值	含义	类型	默认值	校验
id	Dom名称	String	map	是
mapObj	map对象	Arcgis规范下的map对象	包含logo值的Map对象	有
image-url	服务地址	String	''	是
extent	范围	Object	北京城区偏北	对象内部不校验
logo	esri logo	Boolean	false	是
overview	鹰眼图	Boolean	false	是
expandFactor	鹰眼比例	Number	2	是
attachTo	鹰眼位置	String	top-right	是
divCss	Css样式	String	''	是

3. 空间查询

值	含义	类型	默认值	校验
queryTaskUrl	查询服务	String	无	有
map-obj	map对象	Arcgis规范下的map对象	无	有
filts	查询字段	Array	无	有
queryResult	接收查询结果	Object	{}	不接收

4. 唯一值渲染

  data() {
    return {
      asyncData: false,
      map: {},
      renderUrl:
        'http://localhost:6080/arcgis/rest/services/Basic/China_POI/MapServer/0',
      filtField: 'jishu',
      tip: 'AQI级数唯一值渲染'
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Arcgis规范下的map对象	无	有
render-url	渲染服务	String	无	有
filt-field	渲染值参数	String	无	有
tip	提示词	String	唯一值渲染	有

5. 简单渲染

  data() {
    return {
      asyncData: false,
      map: {},
      renderUrl:
        'http://localhost:6080/arcgis/rest/services/Basic/China_POI/MapServer/0',
      sizeInfo: {
        // 分级字段
        field: 'pm2_5',
        valueUnit: 'unknown',
        // 符号大小
        minSize: 1,
        maxSize: 50,
        // 分级数值范围
        minDataValue: 0,
        maxDataValue: 500
      },
      tip: 'pm2.5简单渲染'
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Arcgis规范下的map对象	无	有
render-url	渲染服务	String	无	有
size-info	符号分级参数	Object	无	有
tip	提示词	String	简单渲染	有

6. 分级渲染

  data() {
    return {
      asyncData: false,
      map: {},
      renderUrl:
        'http://localhost:6080/arcgis/rest/services/Basic/China_POI/MapServer/0',
      filtField: 'AQI',
      tip: 'AQI分级渲染'
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Arcgis规范下的map对象	无	有
render-url	渲染服务	String	无	有
filt-field	渲染值参数	String	无	有
tip	提示词	String	分级渲染	有

7. 热力图渲染

  data() {
    return {
      asyncData: false,
      map: {},
      renderUrl:
        'http://localhost:6080/arcgis/rest/services/Basic/China_POI/MapServer/0',
      filtField: 'pm2_5',
      tip: '热力图渲染'
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Arcgis规范下的map对象	无	有
render-url	渲染服务	String	无	有
filt-field	渲染值参数	String	无	有
tip	提示词	String	热力图渲染	有

8. Tile图层加载

  data() {
    return {
      asyncData: false,
      map: {},
      layerUrl:
        'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
    }
  },
  methods: {
    fn(e) {
      // 地图动作函数
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
layer-url	tile服务	String	无	有
click	点击函数	function	无	无

9. 闪烁点

  data() {
    return {
      asyncData: false,
      map: {},
      layerUrl: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
      dataUrl: 'https://iserver.supermap.io/iserver/services/data-DynamicData/rest/data'
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
data-url	数据服务	String	无	有

1. 闪烁样式未上图

10. 加载图层

  data() {
    return {
      asyncData: false,
      map: {},
      layerObj: {},
      layerType: 'TiledMap',
      layerUrl: 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',
      layerOptions: {}
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
layer-type	服务类型	矢量 / 影像 / 百度 / 天地图 / 瓦片	’TiledMap‘	有
layer-url	数据服务	String	无	有
layer-options	扩展项	Object 参考iClient规范	无	有

layerType	类型
TiledMap	矢量
ImageMap	影像
BaiduTile	百度地图
TiandituTile	天地图
WMTS	瓦片地图

11. 鹰眼图

  data() {
    return {
      asyncData: false,
      map: {},
      miniUrl: 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',
      miniOptions: {}
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
mini-url	鹰眼图地址	String	无	有
mini-options	配置项	Object	{ position: undefined }	有

1. 有Bug，待回复，4.9
2. 解决，有引用，显示无官方样式及右下角缩小标，待回复。4.12

12. 缩放

  data() {
    return {
      asyncData: false,
      map: {}
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
options	扩展项	Object	{}	是

13. 比例尺

  data() {
    return {
      asyncData: false,
      map: {}
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
options	扩展项	Object	{}	是

14. 切换底图

  data() {
    return {
      asyncData: false,
      map: {},
      baseMaps: []
    }
  }

    init(that) {
      var baseMaps = []
      // baseMaps[底图名称，地图服务链接，服务类型，扩展项]
      baseMaps.push([
        'China',
        'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China',
        'TiledMap',
        {}
      ])
      baseMaps.push([
        'ChinaDark',
        'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/ChinaDark',
        'TiledMap',
        {}
      ])
      that.baseMaps = baseMaps
    }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
base-maps	底图对象集合	Array	[]	是

15. 绘制工具组

  data() {
    return {
      asyncData: false,
      map: {},
      options: {}
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
options	扩展项	Object	{}	是

16. 捕捉绘制

  data() {
    return {
      asyncData: false,
      map: {},
      options: {}
    }
  }

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
options	扩展项	Object	{}	是

17. 服务区分析

data() {
  return {
    asyncData: false,
    map: {},
    serviceUrl:
      'https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun',
    centerPoint: [-3375, 5605]
  }
}

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
service-url	分析服务	String	无	有
center-point	服务区经纬度	Array	无	有

18. 缓冲区分析

data() {
  return {
    asyncData: false,
    map: {},
    serviceUrl:
      'https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst',
	parameters: {
      dataset: 'RoadLine2@Changchun',
      filter: "NAME='团结路'"
    },
    analystResult: {}
  }
}

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
service-url	分析服务	String	无	有
parameters	分析参数	Object	无	有
analyst-result	接收分析结果	Object	{}	不接收
dataset	数据源中的数据集	String	无	无
filter	过滤条件	String	无	无

19. 泰森多边形分析

data() {
  return {
    asyncData: false,
    map: {},
    serviceUrl:
      'https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst',
	parameters: {
      dataset: 'Factory@Changchun'
    },
    analystResult: {}
  }
}

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
service-url	分析服务	String	无	有
parameters	分析参数	Object	无	有
analyst-result	接收分析结果	Object	{}	不接收
dataset	数据源中的数据集	String	无	无

20. 表面分析

data() {
  return {
    asyncData: false,
    map: {},
    serviceUrl:
      'https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst',
	parameters: {
      polygonset: [
        [4510338, -2010338],
        [4510338, 1063524],
        [3150322, 1063524],
        [3150322, -2010338]
      ],
        dataset: 'SamplesP@Interpolation',
        resolution: 9000,
        zValueFieldName: 'AVG_TMP'
    },
    analystResult: {}
  }
}

值	含义	类型	默认值	校验
asyncData	渲染开关	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
service-url	分析服务	String	无	有
parameters	分析参数	Object	无	有
analyst-result	接收分析结果	Object	{}	不接收
polygonset	分析区域	Array	无	无
dataset	数据源中的数据集	String	无	无
resolution	分辨率	Number	无	无
zValueFieldName	用于提取操作的字段	String	无	无

21. 叠加分析

data() {
  return {
    asyncData2: false,
    map: {},
    serviceUrl:
      'https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst',
	parameters: {
      sourceDataset: 'BaseMap_R@Jingjin',
      operateDataset: 'Neighbor_R@Jingjin',
      tolerance: 0
    },
    analystResult: {}
  }
}

值	含义	类型	默认值	校验
asyncData2	渲染开关，和图层不同，控制叠加顺序	Boolean	false	不接收
map-obj	map对象	Map对象	无	有
service-url	分析服务	String	无	有
parameters	分析参数	Object	无	有
analyst-result	接收分析结果	Object	{}	不接收
sourceDataset	源数据集	String	无	无
operateDataset	操作数据集	String	无	无
tolerance	容限	Number	0	无

Scene系列

需要new一个viewer对象挂载在window上

1.设置相机参数

data() {
  return {
    asyncData: false,
    cameraParams: {
      destination: {
        longitude: 114.2158,
        latitude: 22.4169,
        height: 419
      },
      orientation: {
        direction: {
          x: 0.5945902470233576,
          y: -0.4793925407032518,
          z: 0.6454806194323606
        },
        up: {
          x: -0.1629169048778112,
          y: 0.7143202157541026,
          z: 0.6805914424014209
        },
        heading: 5.899584294129949
      }
    }
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
cameraParams	相机参数	Object	无	有
destination	WGS84世界坐标系中的最终位置	Object	无	无
longitude	以度为单位的经度值	Number	无	无
latitude	以度为单位的纬度值	Number	无	无
height	以米为单位的椭球高	Number	0.0	无
orientation	属性集合	Object	无	无
direction	方位	Number	无	无
up	上方向	Number	无	无
heading	方位角	Number	无	无
pitch	俯仰角	Number	无	无
roll	滚动角	Number	无	无

2. 叠加BingMap地图

data() {
  return {
    asyncData: false,
    imageData: {
      url: 'https://dev.virtualearth.net',
      key: UrlC.URL_CONFIG.BING_MAP_KEY
    }
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
imageData	地图服务参数	Object	无	有

3. 叠加地形图

data() {
  return {
    asyncData: false,
    scmUrl: UrlC.URL_CONFIG.SCENE_XGPARK
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
terrain-url	STK地形服务	String	无	有

4. 叠加OpenStreetMap地图

data() {
  return {
    asyncData: false,
    imageData: {
      url: 'https://a.tile.openstreetmap.org/'
    }
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
imageData	地图服务参数	Object	无	有

5. 叠加图层组

data() {
  return {
    asyncData: false,
    imageDataSet: [
      {
        name: '墨卡托投影坐标系',
        url: UrlC.URL_CONFIG.SUPERMAP_IMG_MEC,
        value: 'MEC'
      },
      {
        name: '经纬度坐标系',
        url: UrlC.URL_CONFIG.SUPERMAP_IMG_WGS,
        value: 'WGS'
      }
    ]
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
imageDataSet	图层组默认选中第一个	Array	无	lengt != 0
name	图层名称	String	无	无
url	图层服务	String	无	无
value	标拾	String	无	无

6. 时态动画

data() {
  return {
    asyncData: false,
    imageUrls: [
      UrlC.URL_CONFIG.TENSE_IMG0,
      UrlC.URL_CONFIG.TENSE_IMG1,
      UrlC.URL_CONFIG.TENSE_IMG2,
      UrlC.URL_CONFIG.TENSE_IMG3,
      UrlC.URL_CONFIG.TENSE_IMG4,
      UrlC.URL_CONFIG.TENSE_IMG5
    ]
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
imageUrls	影像服务数组	Array	无	lengt > 3

7. 地形开挖

data() {
  return {
    asyncData: false,
    stkUrl:
        'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path'
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
stkUrl	开挖图层	String	无	有

8. 通视分析

data() {
  return {
    asyncData: false,
    cbdUrl: UrlC.URL_CONFIG.SCENE_CBD
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
cbd-url	CBD模型服务	String	无	有

9. 淹没模型分析

data() {
  return {
    asyncData: false,
    scmUrl: UrlC.URL_CONFIG.SCENE_XGPARK
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
scm-url	s3m模型服务	String	无	有

10. 淹没地形分析

data() {
  return {
    asyncData: false,
    terrainUrl: UrlC.URL_CONFIG.STK
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
terrain-url	STK地形服务	String	无	有

11. 填挖方分析

data() {
  return {
    asyncData: false,
    sceneUrl:
      'http://www.supermapol.com/realspace/services/3D-dxyx_ios2/rest/realspace',
    spatialDataUrl:
      'http://www.supermapol.com/realspace/services/spatialAnalysis-dxyx_ios/restjsr/spatialanalyst/datasets/DEM@%E5%9B%9B%E5%A7%91%E5%A8%98%E5%B1%B1/terraincalculation/cutfill.json?returnContent=true'
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
scene-url	场景服务	String	无	有
spatial-data-url	空间数据服务	String	无	有

12. 三维标绘

data() {
  return {
    asyncData: false
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收

13. GLTF模型

data() {
  return {
    asyncData: false,
    gltfUrl:
      'http://support.supermap.com.cn:8090/webgl/examples/webgl/SampleData/gltf/man/walk.gltf',
    position: {
      destination: {
        longitude: 116.731444,
        latitude: 39.528856,
        height: 0
      }
    },
    isZoomTo: true
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
gltf-url	GLTF模型地址	String	无	有
position	模型位置Cesium.Cartesian3.fromDegrees的经纬度及高程值	Object	无	有
isZoomTo	是否缩放至	Boolean	true	有

14. KML文件

data() {
  return {
    asyncData: false,
    kmlUrl: 'http://support.supermap.com.cn:8090/webgl/examples/webgl/SampleData/kml/crane.kml'
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收
kml-url	KML文件地址	String	无	有

15. 下载场景

data() {
  return {
    asyncData: false
  }
}

值	含义	类型	默认值	校验
viewer	全局viewer对象，挂载到window	Object	无	无
asyncData	渲染开关	Boolean	false	不接收