dnn-vue-ol/README.md

> 基于 openlayers 的二次封装

### [dnn-vue-ol 测试]

> 基于 openlayers 的二次封装

### 安装

```
npm install dnn-vue-ol
```

<br/>

### 使用

```
// 示例代码
<template>
  <dnn-openlayers > </dnn-openlayers>
</template>

<script lang="ts" setup>
  import DnnOpenlayers from "dnn-vue-ol";
</script>
```

<br/>

### API

| 属性名 | 说明 | 类型    | 默认值 | 版本 |
| ------ | ---- | ------- | ------ | ---- |
| defalutLatlng  | 默认初始化中心点。默认值为南京区域的经纬度。 | array |  [118.763563, 32.061384]      |      |
| defalutZoom  | 默认初始化层级。默认值为7。 | number |  7      |      |
| marksPoint  | 具有聚合功能的标记点。 | array |  []      |      |
| markTextZoom  | 标记点文字展示层级。默认值为7。 | number |  7      |      |
| markTextStyle  | 标记点文字样式。 | object |  {offsetX: 0,offsetY: 10,textAlign: "center",font: "12px font-size",padding: [3, 4, 2, 4],fill: "#fff",fillActive: "#fff",backgroundFill: "#666",backgroundFillActive: "#3E9BFE",}      |      |
| markImgStyle  | 标记点的图标样式。scale：大小规模。opacity：透明度 | object |  {type: "default",imgSrc: "",imgSrcActive: "",scale: 0.6,opacity: 1}      |      |
| mapLayerType  | 底图类型。vec:矢量底图；img:影像底图；ter:地形晕渲 | string |  vec      |      |
| themaeMode  | 主题色（仅底图类型为矢量底图时有效）。light:浅色系；dark:深色系 | string |  light      |      |
| isSearch  | 是否带有搜索区域定位功能 | boolean |  true      |      |
| searchAreaParams  | 搜索区域的请求参数。如非特定，无需修改。 | object |  {cityName: "全国",token: "xxx",checkCode:"xxx",}      |      |
| searchAreaRequestInfo  | 搜索区域的请求地址以及方式。如非特定，无需修改。 | object |  { url: "xxx", method: "get", }      |      |
| adcode  | 区域编码。详情可见：https://datav.aliyun.com/portal/school/atlas/area_selector | string |  例：320100_full      |      |
| areaColor  | 区域蒙层的颜色设置。stroke：区域边线颜色；strokeWidth：区域边线宽度；fill：区域蒙层颜色。 | object |  { stroke: "rgb(87, 124, 204)",strokeWidth: 2,fill: "rgba(87, 124, 204,0.2)",}      |      |
| isFirstSelect  | 是否默认选择第一条。 | boolean |  true      |      |
| isCreatePointByHand  | 点击地图，是否可以创建标记点（单个）。一般用于无其他标记点，和无区域渲染层的情况下 | boolean |  false      |      |
| createPointLnglat  | 根据经纬度，创建标记点（单个）。一般用于无其他标记点，和无区域渲染层的情况下 | array |  [118.763563, 32.061384]      |      |
<br/>

### 事件

| 事件名 | 描述 | 参数                                 | 版本 |
| ------ | ---- | ------------------------------------ | ---- |
| getActiveMarkInfo | 标记点点击事件。参数为标记点的id | function(id: string ) |      |
| getSearchAreaMarkInfo | 区域名搜索，返回相关信息。参数为区域信息markInfo | function(markInfo: string ) |      |
| getCustomPointLnglat | 手动定位增加标记点，返回该点经纬度。参数为经纬度lanlat | function(lanlat: any ) |      |