❤
npm
Sign UpSign In

xych-ol-map

2.1.12 • Public • Published

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
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

Readme

Keywords

Package Sidebar

Install

npm i xych-ol-map

Weekly Downloads

2

Version

2.1.12

License

ISC

Unpacked Size

27.7 MB

Total Files

472

Last publish

Collaborators

  • ssxl82988762
Try on RunKit
Report malware