0.0.2 • Published 2 years ago
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 |