[dnn-vue-ol 测试]

基于 openlayers 的二次封装

安装

npm install dnn-vue-ol

使用

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

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

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

事件

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