cobona-maps-ol v0.8.5

OlMap组件

组件属性

示例

<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

组件方法

组件事件

图层类型

vectorLayer

矢量要素图层，通过数据库接口快速生成地图图层。

通过封装openlayers的Vector实现，除列表提供的属性外，可直接使用openlayers中Vector自有的图层属性和方法。

属性

示例：

{
    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自有的图层属性和方法。

属性

示例：

{
    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"
 }

方法

示例

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自有的图层属性和方法。

属性

示例

{
    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自有的图层属性和方法。

属性

示例：

{
    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实现。

属性

示例

{
    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实现。

属性

示例：

{
    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实现。

属性

示例

{
    type: 'esriTileServerLayer',
    id: 'tile001',
    url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
    visible: true,
    opacity: 1,
    zIndex: 1
}

MapLegend

组件属性

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