Dnn-vue-ol NPM

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 )