cobona-maps-ol
v0.8.19
Published
map widgets from cobona inc. based on openlayers
Downloads
19
Readme
OlMap组件
组件属性
| 属性名 | 字段类型 | 说明 | | ------------------ | -------- | --------------------------------------------------- | | center | Array | 默认为4326坐标系下的地图中心点坐标串，如[104, 31.4] | | centerSR | Number | 指定center使用的空间参考wkid值，如4326 | | zoom | Number | 地图的缩放级别 | | spatialReference | Object | 地图的空间坐标系 | | scale | Number | 地图的比例尺 | | extent | Object | 地图显示的空间范围 | | basemaplayers | Array | 底图图层 | | operationlayers | Array | 业务要素图层 | | drawlayers | Array | 绘制图层，默认包含标绘图层和极坐标图层 | | minZoom | Number | 地图最小缩放级别 | | maxZoom | Number | 地图最大缩放级别 | | maxScale | Number | 地图最大比例尺 | | minScale | Number | 地图最小比例尺 | | controls | Array | 地图的基础控件 | | drawToolVisible | Boolean | 地图绘制工具显示状态 | | baseGalleryVisible | Boolean | 底图切换面板显示状态 | | MapPopupVisible | Boolean | 地图弹框信息状态 |
示例
<OlMap ref="olmap1" class="olmapContainer" :center="geoCenter" :basemaplayers="baselayers" :operationlayers="optlayers" :drawlayers="drawlayers" :controls="olcontrols" :scale="scale" :extent="extent" :minZoom="minZoom" :maxZoom="maxZoom">
</OlMap>
data(){
return{
//geoCenter: [106, 35],
geoCenter: {
x: 1.3460696940618768e7,
y: 3565382.802801566,
spatialReference: {
wkid: 3857,
}
},
minZoom: 1,
maxZoom: 17,
scale: 50000,
extent: [
[110, 24],
[123, 34],
],
extent1: {
xmin: 110.2425,
ymin: 25.2425,
xmax: 134.2324,
ymax: 39.3242,
spatialReference: {
wkid: 4326,
}
},
baselayers: [{
id: "geoqMap",
visible: true,
zIndex: 0,
url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
},
{
id: 'tdtst',
visible: false,
zIndex: 0,
url: 'http://t3.tianditu.com/DataServer?T=img_w&tk=31d5dd4b4d1e3705848e1dfc0d00fc19&x={x}&y={y}&l={z}'
}
],
optlayers: [{
type: "vectorLayer",
url: "http://dev.cobona.cn:8079/rest/queryobjlist",
id: "layer773",
label: '自然村点图层',
visible: true,
opacity: 1,
zIndex: 3,
geometrytype: "point",
where: {
data: {
objname: "envelement",
where: "layerid = 773",
}
},
//分段渲染
jsonstr: `{"field":"typeid","breaksInfo":[{"minValue":10.999,"maxValue":11.001,"style":{"type":"circle","radius":8,"fill":{"color":"rgba(81, 125, 237, 1)"},"stroke":{"color":"rgba(237, 81, 81,1)","width":1}}}],"type":"breaks"}`
},{
type: "nuclearWindLayer",
id: "layerwind2020",
label: '风场',
visible: true,
opacity: 1,
zIndex: 2,
dataurl: "http://dev.cobona.cn:8079/rest/queryobjlist",
listurl: 'http://dev.cobona.cn:8079/rest/getQueryData',
minZoom: 7,
maxZoom: 15,
factor: 10,
where: {
data: {
instanceid: 911,
rastertype: 5,
// id:'348530' //可选，与上面查询条件互斥
}
# 组件功能测试页面
npm run dev
组件方法
| 方法名 | 参数 | 返回 | 说明 | | -------------------- | ------------- | ------ | ------------------------------------------------------------ | | getMap | None | None | 获取地图对象 | | getView | None | None | 获取地图容器视图对象 | | setMapExtent | Array/Object | None | 设置地图显示范围，Array格式：[[left, bottom],[right, top]]默认采用4326坐标系；Object格式： {xmin: , ymin: xmax: ,ymax: ,spatialReference:{wkid:3857}} | | setMapScale | Number | None | 设置地图比例尺 | | setMapResolution | Number | None | 设置地图精度 | | centerAt | Array/Object | None | 地图中心点移动到指定坐标位置，Array格式：[120.8619, 30.4749]；Object格式： {x:1.3460696940618768E7 , y: 3565382.802801566 ,spatialReference:{wkid:3857}} | | setZoom | Number | None | 设置地图的缩放级别 | | addmapControl | string | None | 添加地图控件，包括Rotate, Attribution, Fullscreen, Zoomslider, ScaleLine, MousePosition, MousePosition3857, OverviewMap, ZoomToExtent | | addLayer | Object | None | 添加图层，图层参数说明见Layer类型说明 | | removeLayer | string | None | 移除指定id的图层 | | showLayer | string | None | 显示指定id的图层 | | hideLayer | string | None | 隐藏指定id的图层 | | setLayerRender | Object | None | 更改矢量图层的渲染，参数Object：{layerid:'',layerrender:'' } | | getLayerAttrFields | string | Array | 获取图层的属性列表 | | getAllLayers | None | Array | 获取地图的所有图层 | | getBaseLayers | None | Array | 获取所有底图图层 | | getOperationLayers | None | Array | 获取所有业务要素图层 | | getDrawLayers | None | Array | 获取所有绘制图层 | | getPolarLayers | None | Array | 获取所有极坐标图层 | | getLayersByLayerType | string | Array | | | getLayerById | string-图层id | Object | 查询指定id的地图图层 | | showLayersByType | string | None | 显示指定类型的图层类型，包含baselayer, operationlayer, drawlayer, polaylayer | | hideLayersByType | string | None | 隐藏指定类型的图层类型，包含baselayer, operationlayer, drawlayer, polaylayer | | clearLayersByType | string | None | 清空指定类型的图层类型，包含baselayer, operationlayer, drawlayer, polaylayer | | removeLayersByType | string | None | 删除指定类型的图层类型，包含baselayer, operationlayer, drawlayer, polaylayer | | PrjCircleQuery | Object | Object | 执行点缓冲查询，参数对象包含中心点投影坐标，半径和查询图层的id数组，如{point:[112343443, 343434343], radius: 5000, layerids: ['layer750', 'layer541']} | | AttriQuery | Object | Object | 属性查询，参数包含图层id和属性过滤条件,如{layerids: ['layer513'], where: "typename = 陈屯小学 or typeid=10"} | | SpatialQuery | Object | Object | 空间查询，参数包含输入几何的坐标串数组，和指定查询的图层，如{geom: [[[],[],[]]] ,layerids:["layer695"]} |
组件事件
| 事件名 | 参数 | 说明 | | ---------------- | ------------------------------------------------ | -------------------------- | | centerchange | {prjCenter: Object, geoCenter: Object} | 地图中心点坐标移动 | | extentchange | extent | 地图可见范围变化 | | zoomchange | zoom | 地图缩放级别变化 | | resolutionchange | resolution | 地图分辨率变化 | | click | event, 转发openlayers地图对象点击监听事件 | 地图点击事件 | | singleclick | event,转发openlayers地图对象点击监听事件 | 地图点击事件 | | dblclick | event,转发openlayers地图对象双击监听事件 | 地图双击事件 | | moveend | event,转发openlayers地图对象鼠标移动结束监听事件 | 地图视图内鼠标移动结束事件 | | pointermove | event,转发openlayers地图对象鼠标移动监听事件 | 地图视图内鼠标移动事件 |
图层类型
| 类型名 | 说明 | | ------------------- | ---------------- | | vectorLayer | 矢量要素图层 | | nuclearImageLayer | 浓度计量结果图层 | | nuclearPolarLayer | 极坐标图层 | | nuclearWindLayer | 风场图层 | | esriFeatureLayer | ArcGIS要素图层 | | esriMapServerLayer | ArcGIS动态地图 | | esriTileServerLayer | ArcGIS切片地图 |
vectorLayer
矢量要素图层，通过数据库接口快速生成地图图层。
通过封装openlayers的Vector实现，除列表提供的属性外，可直接使用openlayers中Vector自有的图层属性和方法。
属性
| 属性名 | 类型 | 说明 | | ------------ | ------- | ------------------------------------------------------------ | | id | string | 图层的唯一id | | zIndex | Number | 图层叠加显示的顺序 | | visible | boolean | 图层是否可见 | | opacity | Number | 图层的透明度，0-1 | | label | string | 图层的显示名称 | | type | string | 图层的封装类型，值为vectorLayer | | geometrytype | string | 图层的几何类型，point,line,polygon | | where | object | 图层数据源的查询过滤条件, 对象包含data属性，为object对象，data属性对象中包含objname和where条件语句。如{ data: { objname: "envelement", where: "layerid = 772" }} | | url | string | 数据查询接口，如http://dev.cobona.cn:8079/rest/queryobjlist | | jsonstr | string | 图层的渲染样式，如{"type":"simple","symbol":{"color":[255,0,0,255],"size":6,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSSquare","outline":{"color":[255,0,0,255],"width":3.75,"type":"esriSLS","style":"esriSLSSolid"}}} |
示例：
{
type: "vectorLayer",
url: "http://dev.cobona.cn:8079/rest/queryobjlist",
id: "layer772",
label: '电厂点图层',
visible: true,
opacity: 1,
zIndex: 3,
geometrytype: "point",
where: {
data: {
objname: "envelement",
where: "layerid = 772",
},
},
//示例
// jsonstr: `{"style":{"type":"circle","radius":6,"fill":{"color":[255,0,0]},"stroke":{"color":[0,255,0],"width":1}},"type":"simple"}`
jsonstr: `{"type":"simple","symbol":{"color":[255,0,0,255],"size":6,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSSquare","outline":{"color":[255,0,0,255],"width":3.75,"type":"esriSLS","style":"esriSLSSolid"}}}`nuclearImageLayer
栅格图像图层，提供分析结果栅格图片地图快速上图。
通过封装openlayers的Image类实现，除列表提供的属性外，可直接使用openlayers中Image自有的图层属性和方法。
属性
| 属性名 | 类型 | 说明 | | ---------- | ------- | ------------------------------------------------------------ | | id | string | 图层的唯一id | | zIndex | Number | 图层叠加显示的顺序 | | visible | boolean | 图层是否可见 | | opacity | Number | 图层的透明度，0-1 | | label | string | 图层的显示名称 | | type | string | 图层的封装类型，nuclearImageLayer | | factortype | Number | 因子类型，1-核素浓度，2、3、9-剂量 | | ids | Array | 查询要素的id的数组，如[34282,34286,34290,34294,34298] | | times | Array | 与ids对应的时间信息，如["2019-01-02_09-00","2019-01-02_10-00","2019-01-02_11-00","2019-01-02_12-00","2019-01-02_13-00"] | | rangeurl | string | 图片渲染值范围接口，如"http://dev.cobona.cn:8079/static/html/maxMinRasterdataValue" | | dataurl | string | 数据查询接口，如"http://dev.cobona.cn:8079/rest/queryobjlist" | | imageurl | string | 图片生成接口，如"http://dev.cobona.cn:8079/static/html/rasterimagesServlet" |
示例：
{
type: "nuclearImageLayer",
id: "nuclearImageLayerDoseTime",
visible: true,
label: '逐时剂量',
opacity: 1,
zIndex: 4,
factortype: 2,
ids:[33942,33946,33950,33954,33958],
times:["2019-01-02_09-00","2019-01-02_10-00","2019-01-02_11-00","2019-01-02_12-00","2019-01-02_13-00"],
rangeurl: "http://dev.cobona.cn:8079/static/html/maxMinRasterdataValue",
dataurl: "http://dev.cobona.cn:8079/rest/queryobjlist",
imageurl: "http://dev.cobona.cn:8079/static/html/rasterimagesServlet"
}方法
| 方法名 | 输入 | 输出 | 说明 | | --------------- | ------ | ---- | ------------------------------------------------------------ | | nextImage | Number | None | 不带参数默认显示下一张图像，带参数则显示当前索引+n后的图像，n为输入参数的值 | | getRasterByTime | sting | None | 显示某个时刻的分析结果图像，如"2019-01-03_11-00" |
示例
const layer = this.$refs.olmap1.getLayerById("nuclearImageLayerDoseTime")
if (layer) {
// layer.nextImage()//不传参数默认,索引加1，即是下一时刻的图像
layer.nextImage(2) //参数为2，则输出对应ids当前索引+2后的图片
}const layer = this.$refs.olmap1.getLayerById("nuclearImageLayerDoseTime")
if (layer) {
layer.getRasterByTime("2019-01-03_11-00") //显示某个时刻的剂量
}nuclearPolarLayer
极坐标图层
通过封装openlayers的VectorLayer实现，除列表提供的属性外，可直接使用openlayers中VectorLayer自有的图层属性和方法。
属性
| 属性名 | 类型 | 说明 | | ----------- | ------- | ------------------------------------------------------- | | id | string | 图层的唯一id | | zIndex | Number | 图层叠加显示的顺序 | | visible | boolean | 图层是否可见 | | opacity | Number | 图层的透明度，0-1 | | label | string | 图层的显示名称 | | type | string | 图层的封装类型，nuclearPolarLayer | | center | Array | 极坐标的中心点，只能传经纬度的值，[120.8619, 30.4749] | | distance | Array | 离中心点同心圆的距离半径数组，如[5, 10, 15, 20, 25, 30] | | unit | string | 距离单位，如kilometers、meters | | sectorAngle | Array | 弧段的角度 | | textAngle | Number | 方向标注的角度 |
示例
{
type: "nuclearPolarLayer",
id: "polarLayer",
label: '极坐标1',
visible: true,
opacity: 1,
zIndex: 1,
center: [120.8619, 30.4749], //极坐标的中心点只能传经纬度的值
distance: [5, 10, 15, 20, 25, 30],
unit: "kilometers",
sectorAngle: [11.25, 11.25],
textAngle: -11.25
}nuclearWindLayer
风场图层
通过封装openlayers的VectorLayer实现，除列表提供的属性外，可直接使用openlayers中VectorLayer自有的图层属性和方法。
属性
| 属性名 | 类型 | 说明 | | ------------- | ------- | ------------------------------------------------------------ | | id | string | 图层的唯一id | | zIndex | Number | 图层叠加显示的顺序 | | visible | boolean | 图层是否可见 | | opacity | Number | 图层的透明度，0-1 | | label | string | 图层的显示名称 | | type | string | 图层的封装类型，nuclearWindLayer | | minZoom | Number | 图层的最小缩放级别 | | maxZoom | Number | 图层的最大缩放级别 | | minResolution | Number | 图层的最小分辨率 | | maxResolution | Number | 图层的最大分辨率 | | factor | Number | 因子类型 | | dataurl | string | 获取风场数据的接口 | | listurl | string | 获取风场数组列表的接口 | | where | Object | 风场图层的过滤条件，为json对象格式，包含data属性对象，有两种写法：1） {data：{instanceid: 911, rastertype: 5}}； 2）{data: {id: '348530' }} |
示例：
{
type: "nuclearWindLayer",
id: "layerwind2020",
label: '风场',
visible: true,
opacity: 1,
zIndex: 2,
dataurl: "http://dev.cobona.cn:8079/rest/queryobjlist",
listurl: 'http://dev.cobona.cn:8079/rest/getQueryData',
minZoom: 7,
maxZoom: 15,
factor: 10,
where: {
data: {
instanceid: 911,
rastertype: 5,
// id:'348530' //可选，与上面互斥
}
}
}esriFeatureLayer
接入arcgis地图服务图层创建要素图层，使用openlayers的Vector实现。
属性
| 属性名 | 类型 | 说明 | | ------- | ------- | -------------------------------- | | id | string | 图层的唯一id | | zIndex | Number | 图层叠加显示的顺序 | | visible | boolean | 图层是否可见 | | opacity | Number | 图层的透明度，0-1 | | label | string | 图层的显示名称 | | type | string | 图层的封装类型，esriFeatureLayer | | url | string | 地图服务地址，到图层索引号 |
示例
{
type: 'esriFeatureLayer',
url: 'http://kaps.esrichina.com.cn/arcgis/rest/services/ma/chinaCountry/MapServer/0',
id: 'nanhaiborder',
visible: true,
opacity: 1,
zIndex: 3
},esriMapServerLayer
接入arcgis地图服务图层创建要素图层，使用openlayers的ImageLayer实现。
属性
| 属性名 | 类型 | 说明 | | ------- | ------- | ---------------------------------- | | id | string | 图层的唯一id | | zIndex | Number | 图层叠加显示的顺序 | | visible | boolean | 图层是否可见 | | opacity | Number | 图层的透明度，0-1 | | label | string | 图层的显示名称 | | type | string | 图层的封装类型，esriMapServerLayer | | url | string | 动态地图服务地址 |
示例：
{
type: 'esriMapServerLayer',
url: 'http://kaps.esrichina.com.cn/arcgis/rest/services/SampleWorldCities/MapServer',
id: 'china1',
visible: true,
opacity: 1,
zIndex: 2
}esriTileServerLayer
接入arcgis地图服务图层创建要素图层，使用openlayers的TileLayer实现。
属性
| 属性名 | 类型 | 说明 | | ------- | ------- | ----------------------------------- | | id | string | 图层的唯一id | | zIndex | Number | 图层叠加显示的顺序 | | visible | boolean | 图层是否可见 | | opacity | Number | 图层的透明度，0-1 | | label | string | 图层的显示名称 | | type | string | 图层的封装类型，esriTileServerLayer | | url | string | 切片地图服务图层地址 |
示例
{
type: 'esriTileServerLayer',
id: 'tile001',
url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
visible: true,
opacity: 1,
zIndex: 1
}MapLegend
组件属性
| 属性名 | 类型 | 说明 | | ------ | ----- | ------------------ | | layers | Array | 显示图例的图层数组 |
layer的结构有两种，一种是矢量一个栅格；
示例
<map-legend :layers="legendlayers" v-show="maplegendShow"></map-legend>
data(){
return{
legendlayers:[
{//矢量图层传入结构
label: 'label',
geometrytype: 'point',
jsonstr: `{"type":"unique","field":"名称","defaultStyle":{"type":"circle","radius":3,"stroke":{"color":"red","width":1},"fill":{"color":"white"}},"uniqueInfo":[{"value":"Ｘ１１９","style":{"type":"circle","radius":3,"stroke":{"color":"green","width":1},"fill":{"color":"green"}}},{"value":"Ｘ１０４","style":{"type":"circle","radius":3,"stroke":{"color":"blue","width":1},"fill":{"color":"blue"}}},{"value":"Ｘ３３１","style":{"type":"circle","radius":3,"stroke":{"color":"orange","width":1},"fill":{"color":"orange"}}}]}`,
layerid: 'dianchagn'
},
{
//栅格图层传入结构，色带
label: '剂量',
colordata:{
values: [0.000001, 0.0001, 0.001, 0.01, 0.1, 1, 10, 20, 50, 100, 1000],
colors: ['#9966FF40', '#744DFF40', '#0000FF40', '#007F8040', '#00BE4040', '#00FF0040', '#80FF0040', '#C1FE0040', '#C0FF0040', '#FFFF0040', '#FFD90040', '#FFB30040', '#FF8B0040']
}
}]
}
}