skhj-map
v1.2.4
Published
skhj-map-component
Downloads
80
Readme
forestry-map_component
主要是地图的工具栏和常用的地图功能
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build##功能说明
1、使用方法：
注册为全局使用。（main.js 中进行全局注册使用）
注册为单页面组件使用。
#使用
import DomMap from "forestry-map"
import Vue from "vue";
Vue.use(DomMap);
#
2、组件对应的属性：
<dom-map
ref="dommap2"
class="dommap"
#地图id，当一个页面出现多个时，需要提供id进行区分。有缺省值
:mapId="mapId"
#地图气泡id
:popup-id="popupId"
#左右两边内容是否展开。
:expand="expand"
#图例的样式名称。
:layerSymbolClass="layerSymbolClass"
#气泡是否可见
:isPopuWindowVisible="isPopuWindowVisible"
#是否展示标绘按钮。
:isShowDraw="isShowDraw"
#标绘按钮的标签内容。
:drawLabel="drawLabel"
#是否显示标绘时，确认按钮。
:drawConfirmLabel="drawConfirmLabel"
#是否展示标绘确认按钮。
:isShowDrawConfirm="isShowDrawConfirm"
#比例尺组件右边距
:defaultRight="defaultRight"
#地图工具栏组件右边距
:defaultSymbolRight="defaultSymbolRight"
#地图图层右边距+工具栏右边距
:mapManagerDefaultRight="mapManagerDefaultRight"
#是否显示地图工具栏
:isShowMapToolBar="isShowMapToolBar"
#是否显示图例
:isShowLayerSymbol="isShowLayerSymbol"
#是否显示poi查询
:isShowPoiQuery="isShowPoiQuery"
#是否是标绘模式
:isDrawMode="isDrawMode"
#标绘的地理要素类型 1点 2线 3面 4未知
:drawGraphicsType="drawGraphicsType"
#是否显示罗盘指北针
:subjecMapModel="subjecMapModel"
#是否显示比例尺
:isShowScale="isShowScale"
#地图初始化参数 一般在数据管理中配置好。
:initMapParams="initMapParams"
#是否默认开启i键查询
:defaultFeatureQuery="defaultFeatureQuery"
#单独使用时，默认的缩放等级
:componentZoom="componentZoom"
/*应用对应的图层信息*/
:configLayerList="configLayerList"
/*是否加载一个空白地图*/
:isEmptyMap="isEmptyMap"
#地图加载完成之后的回调，传回了map对象 可以进行业务的操作。
@mapComplete="mapComplete"
#标绘状态下，标绘完成时，返回wkt对象。
@onDrawFinish="onDrawFinish"
#标绘弹框，确认时的回调。
@drawConfirmEvent="drawConfirmEvent"
@要素选中的回调
@featureSelected="featureSelected"
@气泡显示时的回调
@popupEmitEvent="popupEmitEvent"
></dom-map>
##version 0.2.0
1、此版本将标绘与工具栏同时放开，增加了可控性。
2、默认隐藏了一部分的工具栏内容。##version 0.2.1
1、此版本解决地图服务的高亮图层显示时深拷贝问题。##version 0.2.2
1、此版本解决动态加载图层时，给图层增加cqlFilter。
2、增加离线地图加载方式。离线地图下载方式为web墨卡托。##version 0.2.3
1、地图参数根据字典配置来加载##version 0.2.4
1、半成品,根据配置文件添加专题图##version 0.2.5
1、地图图例增加类型3 用来显示圆点形图例。
2、地图图例增加上下拉缩。##version 0.2.6
1、地图图例增加类型3 用来显示圆点形图例。问题修改##version 0.2.7
1、图例添加唯一编码##version 0.2.8
1、修改为单独部署接口访问形式。##version 0.2.9
1、专题图使用img方式加载，避免切片##version 0.3.0
1、工具栏，图层位置，样式问题修改。##version 0.3.1
1、全局对象修改后依赖修改。##version 0.3.2
1、工具栏样式问题修改。##version 0.3.3
1、增加全屏组件。
2、图层搜索中增加layerName参数。##version 0.3.4
1、专题图方法需要增加跨域设置，否则导出地图时，无法导出。##version 0.3.5
1、通过ifream引入该模块时，无法获取token问题修改。##version 0.4.0
1、增加空白地图操作。
2、增加应用对应图层信息，有具体应用传递操作。
3、增加自定义增加图层时，可以手动挂在图层事件。##version 0.4.1
1、浏览器升级后无法获取图层dom信息，导致无法显示图层组件问题修改。##version 0.4.2
1 添加thematicSelectFeatureQuery 专题图点击弹框，默认显示##version 0.4.3
1 支持专题图点击后 是否高亮地图，是否定位地图 在配置文件中配置
config:{
isSupportIquery:true, //是否查询
proj:"EPSG:4326", //坐标系
isHight:true,//是否高亮
isLocation:true, //是否定位
data:[{ //弹框显示的内容
"label":"高度",
"value":"CONTOUR"
}]
}##version 0.4.4
1 修改点击高亮和专题图高亮冲突问题##version 0.4.5
1 点击高亮显示弹框,默认隐藏掉弹框
2 定位弹框样式修改。##version 0.4.6
1 地图图例默认隐藏
2 定位样式修改。##version 1.0.0
1 地图图例修改为可以控制显隐的组件。##version 1.0.3
增加
_legendLayerWrapper图层，用于控制矢量图例，针对那些不需要进行图例控制的矢量图层~~ 增加方法
refreshVectorLegend参数与老图例参数一致，图例需根据 type 进行动态绘制，当前并没有根据type进行分类~~图例的样式名为
mainSymbol，item 的样式名为legendItem, 文本的样式名为text图例增加了显影字段，默认不显示，当全部图例值都为0时，图例隐藏。无需手动设置图例显影修改图例样式，采用ul/li 去显示列表
图例item
增加是否显示checkbox的选项, 该选项用于处理栅格瓦片图层以及图层组。图例item
需增加图标方法适配不同的图标。当前图标有image、正方形、圆形当前图例会获取的属性有（constant中的属性）
showSymbols 、symbols、customLegend、showCheckBox、singleSymbolCache、layerKey、updateBySymbols、defaultLegend,可通过layer.set进行初始化
##version 1.0.5
- 修复对于需要过滤的图层，id与过滤属性一样，导致的图例唯一性判断错误
- 增加图例样式
- 更改图例组件总样式，避免因为样式名称导致显示效果不正确
version 1.0.6
增加新方法，便于调用图例
const legend = {
name:'Legend',
id:'legend',//
url:'',
type:'1',
color:'#000000',
width:'16px',
height:'16px',
}
//其中type类型对应值如下
const type = {
'1': 'image',
'2': '正方形',
'3': '圆',
'5':'实线',
'6':'文字',//只有文字，没有图标，没有勾选框
'7':'自定义',//
'8':'虚线',
}
version 1.1.0 （待更新）
图例组件趋于稳定，进行了以下更改
移除之前的expand展开相关的样式，整个图例的位置，由map 去维护，默认图例位置在右下角
更改勾选框显示逻辑。勾选框会一致存在，但多出一个无法勾选的选项。当图层设置
showCheckbox的值为false时，改勾选框无法勾选提供自定义图标样式。建议
type的取值为1或者2（也兼容之前的所有值）。样式为图例中的style对象，style中的值为标准css样式属性
const legend = {
name:'Legend',
id:'legend',//
url:'',
type:'2',
style:{
'background-color':'white',
'height':'20px',
'width':'20px',
'border':'.....'
}
}
- 支持全面自定义图例，该图例使用
v-html指令。用法如下：
const backgroundColor = `background-image: linear-gradient(to bottom,
#f10e0e,#fca400,rgb(251, 255, 5),rgb(123, 241, 123),rgb(84, 175, 211),rgb(20, 4, 253))`
const legend = [
{
name: '气温',
type: '7',
id: '气温',
customLegend: `
<div style="color: #fff;text-align: center; display: flex;flex-direction: column;align-items: center;">
40°C
<div style="${backgroundColor}; width: 2vh;height: 6vh;"></div>
-10°C
</div>`
}, {
type: '2',
name: '省界',
style: 'width: 22px; height: 12px; border: 2px solid black;'
}, {
type: '2',
name: '水系',
style: 'width: 22px; height: 2px; background-color: rgb(52, 149, 239);'
}, {
type: '7',
customLegend: `Erosion (t hm<sup>-2</sup>yr<sup>-1</sup>)`
}
]
- 图标名称使用
v-html,支持html标签。 为了适配上标下标的情况
version 1.1.1
- 修复无法切换动态图例和全部图例
- 修复点击全选，后台报错的bug
version 1.1.2
- 修复图例子项点击时，页面数据还未同步的问题 2.修复全选按钮的显示状态不正确的问题，与子项联动 3.优化矢量图层动态切换，图例实时更新的实现逻辑，由visible 更改为style 方式
version 1.1.3
- 修复全选按钮，显示/隐藏 状态不正确的问题
- 修复无法正常控制单图例栅格图层的问题。 单图例栅格图层使用visible控制。 多图例栅格图层根据图例过滤属性控制。 单图例矢量图层通过style 控制 多图例矢量图层通过自定义type控制。当前只支持相同类型字段
version 1.1.4
- 修复单图例矢量图层，在取消图例时，图例组件将其移除，无法在进行控制的问题
version 1.1.5
- 修复图例组件报错问题
- 修改地图控件字体问题
version 2.0.0
发布新版本图层管理器，默认使用旧版本 修复已知样式问题
version 1.1.6
- 修复图例组件报错问题
- 修改地图控件字体问题
- 将2.0.0版本内容合并
version 1.1.7
- 图例增加新功能，实现对于矢量图层多个子项共享check 状态，为解决生物多样性年龄、性别
version 1.1.8
修复老版本图层管理器点击后未绘制的bug
version 1.1.9
- 修复新版图层管理器搜索异常
- 修复新版图层管理器父子节点交互异常
version 1.1.10
- 优化图层管理器，图层管理器使用label 作为唯一键
version 1.1.11
- 图层根据名称手动显示时，问题修改。