xych-ol-map

v2.1.12

Published

2 years ago

浙江信宇科技有限公司-ol地图包。忘把readme加进来了

Downloads

0High
0Medium
0Low

ssxl82988762

xych ol map

Vue 3 + TypeScript + Vite

安装依赖命令

npm i xych-ol-map

一、组件

1.1 树状目录TheToc

1.1.1 引入

在main.ts中引入xych-ol-map

import App from "./App.vue";
import XychMap from 'xych-ol-map';
import '../node_modules/xych-ol-map/style.css';//引入样式

createApp(App)
  .use(router as any)
  .mount("#app");

在html中直接引用该组件

<TheToc ref="theTocRef" :olXinyu="olXinyu" />

1.1.2 传入参数

| 参数名 | 说明 | 类型 | 默认值 | | ------- | --------------| ------- | ----------| | olXinyu | 必传, xych-ol-map定义的封装ol方法的类 | OlXinyu | 无 |

1.1.3 方法

| 方法 | 说明 | 返回值类型 | 备注 | | ----- | ------- | ---------- | ------- | | setTocConfig(tocConfig: object) | 设置树状目录配置 | void | 目前只需调用该方法修改配置，控制显示隐藏由使用人自己设置 | | getTreeConfig() | 设置配置后，获取树状目录的配置 | object | 组件由el-tree二次封装，将setTocConfig传入的tocConfig经过内部filterMenu转化后赋值给el-tree | | setTheTocWidth(width: number) | 设置树状目录的宽度 | void | 默认为406px | | setTheTocVisible(visible: Boolean) | 设置树状目录的显隐 | void | 目前废弃，树状目录直接显示，由使用者自己设置显隐 | | setTheToc(visible: Boolean, tocConfig: object) | 设置树状目录 | void | 目前废弃，调用setTocConfig和setTheTocVisible |

1.2 绘制组件RedLine

1.2.1 引入

在main.ts中引入xych-ol-map

import App from "./App.vue";
import XychMap from 'xych-ol-map';
import '../node_modules/xych-ol-map/style.css';//引入样式

createApp(App)
  .use(router as any)
  .mount("#app");

在html中直接引用该组件

<RedLine ref="redLineRef" :olXinyu="olXinyu" />

1.2.2 传入参数

| 参数名 | 说明 | 类型 | 默认值 | | ------- | --------------| ------- | ----------| | olXinyu | 必传, xych-ol-map定义的封装ol方法的类 | OlXinyu | 无 |

1.2.3 方法

| 方法 | 说明 | 返回值类型 | 备注 | | ----- | ------- | ---------- | ------- | | clearAll() | 全部清除 | void | 无 | | setRedLineVisible(visible: Boolean) | 设置绘制组件的显隐 | void | 目前废弃，绘制组件直接显示，由使用者自己设置显隐 |

二、工具类

2.1 OlXinyuSource

2.1.1 引入

在script中引入OlXinyuSource

import { OlXinyuSource } from 'xych-ol-map';

2.1.2 如何加载地图

在html中需要一个地图DOM元素载体，必须设置宽高

<div ref="mapRef" class="map"></div>

在script中加载，比如：

import { OlXinyuSource } from 'xych-ol-map';

const config = {
  layers: [
    {
      id: 'tdt',
      caption: "天地图",
      isBaseMap: true,
      addTree: true,
      layerType: "GroupLayer",
      subLayers: [
        {
          id: 'yxdt',
          caption: '影像底图',
          layerType: 'TileWMTS',
          mapUrl: 'http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts',
          zIndex: 1,
          opacity: 1,
          visible: true,
          layer: 'img',
          matrixSet: 'w'
        },
        {
          id: 'yxzj',
          caption: '影像注记',
          layerType: 'TileWMTS',
          mapUrl: 'http://t0.tianditu.gov.cn/cia_w/wmts?request=GetCapabilities&service=wmts',
          zIndex: 1,
          opacity: 1,
          visible: true,
          layer: 'cia',
          matrixSet: 'w'
        },
      ]
    }
  ]
}

onMounted(async () => {
  //使用OlXinyu类必须在DOM元素加载完之后
  olXinyu.value = new OlXinyuSource.OlXinyu({
    element: mapRef.value,//地图DOM元素
    zoom: 2,
    minZoom: 1,
    maxZoom: 25,
    loadDefaultBasemap: false,
    coordinateSystem: "EPSG:4490",
  });

  await olXinyu.value.setMapConfig(config);
});

2.1.3 OlXinyuSource，地图包

| 参数 | 类型 | 说明 | | ------- | -------| ------------------------------------------------------------------------| | OlXinyu | class | 封装ol方法的地图类，最主要的部分 | | CoordinateSystem | enum | 枚举值：目前已知的不同的地图坐标系，可根据坐标系查询不同的坐标系信息 |
| build(options: OlXinyuOptions) | function | 根据传入的options构造一个OlXinyu实例并返回 | | geometryOperation | object | 内含一些图形要素操作的方法：是否相交、擦除、是否包含、合并 | | getProjectionByName(coordinateSystemName: CoordinateSystem) | function | 根据坐标系名称获取实际坐标系参数 | | wktTranslator | object | featureToWkt, wktToFeature。根据OlXinyu的坐标系，将Feature与Wkt互相转化的工具 | | arsgisMapServerQuerier | object | arcgis mapserver查询工具对象 | | superMapWfsQuerier | object | 超图WFS查询工具对象 |

三、工具类讲解

3.1 OlXinyu:地图类

3.1.1 OlXinyu 实例化

import { OlXinyuSource } from 'xych-ol-map';

onMounted(async () => {
  //使用OlXinyu类必须在DOM元素加载完之后
  olXinyu.value = new OlXinyuSource.OlXinyu({
    element: mapRef.value,//地图DOM元素
    zoom: 2,
    minZoom: 1,
    maxZoom: 25,
    loadDefaultBasemap: false,
    coordinateSystem: "EPSG:4490",
  });

});

3.1.2 OlXinyu 对象属性

| 参数名 | 说明 | 类型 | 备注 | | -------------- | ------------ | --------------- | ------------------- | | map | 地图 | ol.Map | 无 | | mapConfig | 地图图层配置 | object | 该地图绑定的图层配置 | | baseMapIds | 底图的id 数组 | Array<string> | 无 | | coordinateSystem | 坐标系 | enum | 无 | | projection | 坐标系 | Projection | ol类，由coordinateSystem和内置方法获得 | | setNodeChecked | 树状目录设置节点勾选状态的方法 | function | 由树状目录传入 | | drawUtil | 绘制、上传对象 | 自定义方法类DrawUtil | 与地图绑定的绘制、上传对象，里面有图形上传的、绘制图形以及操作图层的方法 | | mapToolsUtil | 地图工具对象 | 自定义方法类MapToolsUtil | 与地图绑定的工具对象，里面有缩放、分屏、卷帘等一系列操作地图的方法 |

3.1.3 OlXinyu 对象方法

| 方法 | 说明 | 返回值类型 | 备注 | | ---- | --- | ---- | --------------------------------------------- | | setMapConfig(mapConfig: object, isLoad: Boolean = false) | 设置图层配置 | void | 异步方法。若isLoad为true，则会加载所有的图层到地图中；若图层自身设置里visible为true，也会加载。必须调用的方法，其中会初始化drawUtil和mapToolsUtil两个工具对象。 |
| addMapConfig(layerGroups: object, isLoad: Boolean = false) | 增加mapConfig内容 | void | mapConfig已设置，往其中加入LayerGroup数组的方法。 | | getMapConfig() | 设置图层组可见性 | MapConfig: Object | 获取mapConfig | | flyTo(center: [number, number], zoom?: number) | 根据中心点和缩放级别定位 | void | 地图定位至中心点，缩放级别为zoom | | getLayerOptionByGroupOption(layersArr: Array, id: String) | 获取对应id的图层信息 | object | layersArr一般传入getMapConfig()获取的图层组配置，从中获取对应id的图层信息 | | removeLayers(optionsArray: Array, isBaseMap?: Boolean) | 移除多个图层 | void | optionsArray：传入图层组配置信息；isBaseMap：是否底图，无需在意 | | switchBaseMap(id?: string | string[]) | 切换底图 | void | id：目标底图id，如果不传或id不正确，则自动切换到下一底图 | | getLayerById(id: string) | 根据id从地图中获取某个图层 | Layer | 获取的ol.map中的图层Layer，与getLayerOptionByGroupOption获取的图层的信息不同 | | setLayerVisible(id: string, visible: boolean) | 设置对应id图层的显隐 | void | 有的图层加载了，但是配置visible为false，若需要显示，在setMapConfig加载完图层后，需再调用setLayerVisible显示图层。若图层尚未加载，则会先加载图层。 | | setLayersVisible(ids: Array, visible: boolean) | 设置id数组对应图层的显隐 | void | 基本同setLayerVisible | | setLayerOpacity(id: string, opacity: number) | 设置id对应图层的透明度 | void | opacity: [0, 1] | | adjustOpacity(id: string, delta: number) | 添加(或减少)id对应图层的透明度 | number | 返回修改后的值，不会超过[0, 1]区间 | | query(id: string, feature: Feature, way: string or null, filter: Filter or undefined, token?: any) | 某个id对应图层进行空间或属性等查询 | any | feature：图形要素； way：查询方式，spatial、filter、spatialAndFilter、all；filter：属性条件查询必传参数；token 接口所需token，可能不需要 | | locate(featureList: Array, padding: Array = [0, 0, 0, 0], time: number = 1) | 根据图形数组定位 | void | featureList：图形要素数组； padding：定位范围距离地图边沿的距离([上，右，下，左])；time：定位的时间 | | bindMapClick(layerFilter: any, callback: Function) | 绑定事件：点击地图上的图形要素触发 | listener | layerFilter：图层筛选方法，入参唯一，参数类型为Layer； callback：回调函数，参数为地图点击到的图形要素feature，若没有点击到图形要素，不会调用callback | | unbindMapEvt(listener: any) | 解除监听 | void | 解除监听事件 | | getDrawUtil() | 获取该olXinyu对应的drawUtil(一些layer常用的方法，绘制、上传方法) | DrawUtil | 必须先设置mapConfig，才能使用getDrawUtil | | getMapToolsUtil() | 获取该olXinyu对应的mapToolsUtil(常用的地图工具箱方法，比如绘图（drawUtil的比较详细）、测量、分屏、卷帘、全屏、缩放) | MapToolsUtil | 必须先设置mapConfig，才能使用getMapToolsUtil |

3.2 wktTranslator:wkt和feature转换工具对象

| 方法 | 说明 | 返回值类型 | 备注 | | -------------- | ------------ | --------------- | ------------------- | | wktToFeature(wkt: wkt) | 将wkt转化成feature | void | 基于map的坐标系进行转化 | | featureToWkt(feature: Feature) | 将feature转化成wkt | void | 基于map的坐标系进行转化 |

3.3 geometryOperation:图形操作工具

| 方法 | 说明 | 返回值类型 | 备注 | | -------------- | ------------ | --------------- | ------------------- | | booleanOverlap(geometry: Geometry, geometry2: Geometry) | 判断两个图形是否相交 | Boolean | 无 | | difference(geometry: Geometry, geometry2: Geometry) | 通过从第一个多边形中剪切第二个多边形来查找两个多边形之间的差值 | Geometry | 无 | | union(geometryList: Array) | 合并多个多边形Polygon | Geometry | 无 | | over(geometry: Geometry, geometry2: Geometry) | geometry是否覆盖geometry2 | Boolean | 无 |

3.4 superMapWfsQuerier:超图WFS查询工具对象

| 方法 | 说明 | 返回值类型 | 备注 | | -------------- | ------------ | --------------- | ------------------- | | getAll(url: string) | 不设置条件进行查询 | any | 无 | | filterQuery(url: string, filter: Filter) | 根据属性条件进行查询 | any | 无 | | spatialQuery(url: string, feature: Feature) | 根据空间条件进行查询 | any | 无 | | spatialAndFilterQuery(url: string, feature: Feature, filter: Filter) | 同时根据空间、属性条件进行查询 | any | 无 | | statistical(fields: string[], groupField: string, res: any) | 根据条件统计 | any | fields 统计字段, groupField 分组字段, res 空间查询返回结果 |

3.5 arsgisMapServerQuerier:arcgis mapserver查询工具对象

| 方法 | 说明 | 返回值类型 | 备注 | | -------------- | ------------ | --------------- | ------------------- | | arcgisMapserverSpatialAndFilterQuery(url: string) | 不设置条件进行查询 | any | 无 | | arcgisMapserverSpatialAndFilterQueryByUrl(url: string, filter: Filter) | 根据属性条件进行查询 | any | 无 | | spatialQuery(url: string, feature: Feature) | 根据空间条件进行查询 | any | 无 | | arcgisMapserverSpatialAndFilterQueryPost(url: string, feature: Feature, filter: Filter) | 同时根据空间、属性条件进行查询 | any | 无 |

3.6 DrawUtil 绘制、上传红线对象，内含图层的一些通用方法

PS:实例化DrawUtil，在构造方法中会往map中加入一些用于操作的图层，用于上传、绘制红线。 export图层为各种操作所在的图层，合并、擦除、导出等等。合并、擦除、导出是在点选的基础上进行的，当然自己操作export和cckgtc图层，不用点选也是可以的。

| 方法 | 说明 | 返回值类型 | 备注 | | ------------ | ---------- | ------------- | --------------- | | getToken() | 获取查询接口所需token | string | 若调用OlXinyu的query方法，需要token，可以调用该方法 | | getFeaturesByGeometries(geometries: Array) | 通过空间属性Geometry数组获取对应的feature数组 | Array | 无 | | addFeaturesAndClear(id: string, features: Array) | 清空图层并将图形数组添加到对应id图层中 | void | 无 | | addFeatures(id: string, features: Array) | 将图形数组添加到对应id图层中 | void | 无 | | removeFeatures(id: string, features: Array) | 将图形数组从对应id图层中移除 | void | 无 | | getFeatures(id: string) | 获取图层的所有图形 | Array | 无 | | addGeometriesAndClear(id: string, geometries: Array) | 清空图层并将Geometry数组添加到对应id图层中 | void | 无 | | addGeometries(id: string, geometries: Array) | 将Geometry数组添加到对应id图层中 | void | 无 | | onShapeFileUpload(file: File, show: Boolean = true) | 读取shp文件获取图形 | Feature | 异步方法。file:上传后的File文件, show:是否将返回的feature显示在import图层中，并定位 | | onCadFileUpload(file: File, show: Boolean = true) | 读取cad文件获取图形 | Feature | 异步方法。file:上传后的File文件, show:是否将返回的feature显示在import图层中，并定位 | | onTxtFileUpload(file: File, show: Boolean = true) | 读取txt文件获取图形 | Feature | 异步方法。file:上传后的File文件, show:是否将返回的feature显示在import图层中，并定位。该方法用到了coordinateSystemConversion进行图斑坐标转换（"EPSG:4549", "EPSG:4490"），如果坐标不对，修改源代码即可 | | startDrawTool(drawEndCallBack: Function, type: String = null) | 开始绘制 | void | drawEndCallBack为绘制图形结束的回调方法，参数为绘制得到的feature；type: 绘制类型，有Point、LineString、Polygon、Circle。单击开始绘制，双击结束绘制。 | | getDrawType() | 获取绘制类型 | string | 无 | | getDrawProxy() | 获取绘制工具 | DrawProxy | DrawProxy为自定义绘制类，DrawUtil基于DrawProxy封装 | | editDrawType(type: string) | 修改绘制类型并会停止绘制，如果当前还在绘制，那么会清除，必须调用了startDrawTool调用才能使用该方法 | void | type: 绘制类型，有Point、LineString、Polygon、Circle | | editDrawTypeAndDraw(type: string) | 修改绘制类型，不会停止绘制，如果当前还在绘制，那么会清除，必须调用了startDrawTool调用才能使用该方法 | void | type: 绘制类型，有Point、LineString、Polygon、Circle | | stopDrawTool() | 停止绘制，如果当前还在绘制，那么会清除 | void | 无 | | clearDrawProxy() | 停止绘制并重置DrawProxy | void | 无 | | undoDraw() | 撤回正在绘制图形的上一步 | void | 无 | | clearDrawedFeatures() | 清空绘制图形和export图层 | void | 无 | | getDrawedFeatures(isWkt: Boolean = false) | 获取绘制的所有图形 | array | isWkt:是否返回wkt | | clearSelectedFeatures() | 清除点选图形和对应在draw-proxy中绘制的图形 | void | 无 | | selectByClick() | 开启点选，通过地点击选中地图上绘制的图形，将点选的图形加入到export图层中，点选后的图形可以进行擦除、合并操作 | void | 无 | | closeSelectByClick() | 关闭点选 | void | 无 | | stateOfListener() | 判断是否开启点选功能 | Boolean | 无 | | getSelectedNumber() | 获取点选图形的数量 | Number | 无 | | eraseTheSelected() | export中的图形擦除cckgtc中的图形,cckgtc中的图形需自己调用方法添加 | void | 无 | | getUnionByFeatures() | 获取图形要素数组合并后的图形要素 | Feature | 无 | | mergeTheSelected() | 合并点选的图形 | void | 无 | | onExport(wkts) | 将wkt数组导出成红线文件 | void | wkts：Array | | onExportLayer() | 将export图层的红线（即点选经过合并、擦除后的图形要素）导出成文件 | void | 无 | | getArea(geometry: Geometry) | 获取几何对象的面积（平方米） | Number | 返回面积单位平方米 | | getIntrSurfsToHighlight(feature: Feature, feature2: Feature, show: Boolean = true) | 判断图形是否相交，返回相交部分，并在Dkhighlight图层中高亮显示 | Feature or null | show: 是否在Dkhighlight图层中高亮显示 | | layerClear(id: string) | 通过id清空对应图层的图形 | void | 无 | | allClear() | 全部清空 | void | 无 |

3.7 MapToolsUtil: 地图常用的一些方法

| 方法 | 说明 | 返回值类型 | 备注 | | ----------- | --------- | ------------ | --------------- | | startZoomOutTool() | 开始缩小 | void | 鼠标变成十字形，划出矩形区域后地图缩小（不过我划线的时候看不到划的区域，目前未知） | | startZoomInTool() | 开始放大 | void | 鼠标变成十字形，划出矩形区域后地图放大（不过我划线的时候看不到划的区域，目前未知） | | stopZoomOutTool() | 停止缩小 | void | 无 | | stopZoomInTool() | 停止放大 | void | 无 | | stopZoomTool() | 停止缩放 | void | 无 | | fullScreenTool() | 全屏 | void | 无 | | stopFullScreenTool() | 停止全屏 | void | 无 | | startCurtainTool(layerIds: Array) | 开始卷帘 | void | layerIds: 右侧需要对比的图层id数组 | | stopCurtainTool() | 停止卷帘 | void | 无 | | startCompareScreen(sizeList: Array = null, evt: Function = null) | 开始分屏 | void | sizeList: 分屏尺寸，不传则默认为左右平分, evt:分屏创建完后，分出来的地图需要调用的方法，参数唯一，类型为OlXinyu | | stopCompareScreen() | 停止分屏 | void | 无 | | stopCompareScreen() | 停止分屏 | void | 无 | | startMeasure(measureValue: String = null) | 开始测量 | void | measureValue 线:LineString（默认），多边形: Polygon | | stopMeasure() | 停止测量 | void | 无 | | startDraw(type: string) | 开始绘制 | void | type: Point, Polygon, LineString, Circle | | stopDraw() | 停止绘制 | void | 无 | | clearAll() | 清除所有 | void | 无 |

sizeList举例：

let sizeList = [
  { width: "50%", height: "100%" },
  { width: "50%", height: "100%" },
];

四、项目注意事项

4.1 本项目使用supermapMVT图层注意事项

在所需依赖@supermap/iclient-ol/overlay/vectortile中放入对应@supermap/iclient-ol版本的olms.js 目前所用版本@supermap是11.1.0-a，xych-ol-map附带有对应olms.js