OpenLayers Utils Xinyu

基于ol v6.15.1封装。

一、 地图初始化

1.1 构建工具类对象

import { OlUtilsXinyu } from "../dist/ol-utils-xy.esm.min.js";
const olXinyu = OlUtilsXinyu.build({ elementId: "map" });

| 参数名 | 说明 | 类型 | 默认值 | | ------- | ---------- | ------ | --------------------------- | | elementId | 必填，地图容器DOM元素id | string | 无 | | center | 选填，地图中心点 | Array | 温州 | | zoom | 选填，初始化缩放层级 | number | 12 | | minZoom | 选填，最小缩放层级 | number | 0 | | maxZoom | 选填，最大缩放层级 | number | 20 | | coordinateSystem | 选填，坐标系，支持"EPSG:4490"、"EPSG:4549"、"wenzhou2000" | string | "EPSG:4490" |

1.2 OlXinyu对象属性

| 属性名 | 说明 | 类型 | 备注 | | ------- | ---------- | ------ | --------------------------- | | map | ol地图对象 | Map | 无 | | projection | 坐标系 | Projection | 无 | | baseMapIds | 底图图层组id数组 | Array | 可与图层初始化参数isBaseMap结合使用 | | layerProxies | 图层对象数组 | Array | 可通过values属性的layer属性访问图层对象 | | drawProxy | 绘图工具 | DrawProxy | 需要调用initDraw()初始化后才能访问 |

1.3 OlXinyu对象方法

| 方法 | 说明 | 返回值类型 | 备注 | | ------- | ---------- | ------ | --------------------------- | | flyTo(center: [number, number], zoom?: number) | 定位地图中心点 | void | 无 | | switchBaseMap(id?: string) | 切换底图，指定id时使用id对应的图层，未指定时使用下一组图层 | void | 无 | | getProxyById(id: string) | 根据id获取图层代理对象 | Array | 可与图层初始化参数isBaseMap结合使用 | | layerProxies | 图层对象数组 | LayerProxy | 无 | | setLayerVisible(id: string, visible: boolean) | 设置某一组图层的可见性 | void | 无 | | getLayerVisible(id: string) | 获取某一组图层的可见性 | boolean | 无 | | setLayerOpacity(id: string, opacity: number) | 设置某一组图层的透明度 | void | 无 | | getLayerOpacity(id: string) | 获取某一组图层的透明度 | number | 无 | | adjustOpacity(id: string, delta: number) | 调整某一组图层的透明度并返回调整后的透明度 | number | 无 | | initDraw(options?: DrawProxyOptions) | 初始化绘图对象drawProxy | void | 无 | | loadLayers(optionsArray: Array) | 根据配置加载图层 | void | 无 |

二、 图层

2.1 默认图层

使用4490坐标系时，默认加载浙江天地图矢量图层和影像图层，默认显示矢量图。 使用4549坐标系时会默认加载XX内网底图，默认显示矢量图。 使用温州2000坐标系时无默认底图，请自行添加，相关图层记得设置isBaseMap参数为true。

2.2 切换图层

可以使用olXinyu的switchBaseMap()方法对底图进行切换；也可以使用设置图层可见性的方法实现。

2.3 图层参数

2.3.1 图层组参数ProxyOptions

| 参数名 | 说明 | 类型 | 默认值 | | ------- | ---------- | ------ | --------------------------- | | id | 必填，图层组id | string | 无 | | name | 必填，图层组名称 | string | 无 | | type | 必填，组内图层类型 | string | 无 | | layers | 必填，图层参数对象数组 | Array | 无 | | visible | 选填，初始化时的可见性 | boolean | false | | opacity | 选填，初始化时的透明度 | number | 1 | | isBaseMap | 选填，是否为底图 | boolean | false |

2.3.2 图层类型

'ArcGISWMTS'、'TileArcGISRest'、'TileXYZ'、'TileImage'、'SuperMapWMTS'、'SuperMapWMS'

2.3.3 图层参数LayerOptions

| 参数名 | 说明 | 类型 | 默认值 | | ------- | ---------- | ------ | --------------------------- | | id | 必填，图层id | string | 无 | | name | 必填，图层名称 | string | 无 | | url | 必填，图层对应的服务地址 | string | 无 | | zIndex | 选填，图层显示优先级 | number | 0 | | crossOrigin | 选填，参考ol官网 | boolean | 无 | | layer | 选填，参考ol官网 | string | 无 | | matrixSet | 选填，参考ol官网 | string | 无 | | ratio | 选填，'SuperMapWMS'类型的图层使用，参考ol官网 | number | 1 | | params | 选填，'SuperMapWMS'类型的图层使用，参考ol官网 | Object | 无 | | format | 选填，参考ol官网 | string | "tiles" | | version | 选填，参考ol官网 | string | "1.0.0" | | style | 选填，参考ol官网 | string | "default" |

三、WFS查询

3.1 获取WFS查询工具对象

import { OlUtilsXinyu } from "../dist/ol-utils-xy.esm.min.js";
const wfsQuerier = OlUtilsXinyu.wfsQuerier;

3.2 WFS查询对象方法

| 方法 | 说明 | 返回值类型 | 备注 | | ------- | ---------- | ------ | --------------------------- | | getAll(url: string) | 不设置条件进行查询 | Promise | 查询成功时返回结果对象 | | filterQuery(url: string, filter: Filter) | 根据属性条件进行查询 | Promise | 查询成功时返回结果对象 | | spatialQuery(url: string, feature: Feature) | 根据空间条件进行查询 | Promise | 查询成功时返回结果对象 | | spatialAndFilterQuery(url: string, feature: Feature, filter: Filter) | 同时根据空间、属性条件进行查询 | Promise | 查询成功时返回结果对象 |

3.3 获取WKT与geojson对象转换工具对象

import { OlUtilsXinyu } from "../dist/ol-utils-xy.esm.min.js";
const wktTranslator = OlUtilsXinyu.wktTranslator;

方法分别为wktToFeature(wkt: string)和featureToWkt(feature: Feature)

四、图形绘制

4.1 初始化图形绘制工具对象

import { OlUtilsXinyu } from "../dist/ol-utils-xy.esm.min.js";
const olXinyu = OlUtilsXinyu.build({ elementId: "map" });
olXinyu.initDraw();
const drawProxy = olXinyu.drawProxy;

4.2 工具初始化参数DrawProxyOptions

| 参数名 | 说明 | 类型 | 默认值 | | ------- | ---------- | ------ | --------------------------- | | drawFillColor | 选填，绘制过程填充色 | string | "rgba(255, 255, 255, 0)" | | drawStrokeColor | 选填，绘制过程描边颜色 | string | "#409eff" | | drawStrokeWidth | 选填，绘制过程描边宽度 | number | 2 | | layerFillColor | 选填，绘制结果填充色 | string | "rgba(255, 255, 255, 0.2)" | | layerStrokeColor | 选填，绘制结果描边颜色 | string | "#ffcc33" | | layerStrokeWidth | 选填，绘制结果描边宽度 | number | 2 |

4.3 对象方法

| 方法 | 说明 | 返回值类型 | 备注 | | ------- | ---------- | ------ | --------------------------- | | start(type: string) | 开始绘制指定类型的图形 | void | type可为Point、LineString、Polygon | | undo() | 移除绘制中的最后一个点 | void | 无 | | end() | 结束绘制 | Promise | 双击可完成当前图形的绘制，该方法用于结束绘制 | | clear() | 清除所有绘制内容 | void | 无 |
| getAllFeatures(isWkt?: boolean) | 获取所有绘制的图形 | Array<string | Feature> | 无 |
| onDrawEnd(callback: Function) | 设置单个图形绘制结束时的回调 | void | 回调包含两个参数，第一个为Feature，第二个为WKT |