xych-ol-map v2.1.12

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 传入参数

1.1.3 方法

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 传入参数

1.2.3 方法

二、 工具类

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，地图包

三、工具类讲解

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 对象属性

3.1.3 OlXinyu 对象方法

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

3.3 geometryOperation:图形操作工具

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

3.5 arsgisMapServerQuerier:arcgis mapserver查询工具对象

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

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

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

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