openlayers6.4.3+geoserver+vue

openlayers6.4.3+geoserver+vue（开源）

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、openlayers6.4.3和geoserver的安装使用？

1.在geoserver官网下载最新的geoser的war包

--- http://geoserver.org/release/2.17.x/

2、我是后端开发所以配置了java环境，geoserver是基于java，将war丢到tomcat中的webapp下，运行

3、默认账户密码【admin，geoser】

4、建立工作区发布图层，点击获取图层数据：

5、点击获取图层地址用于openlayers调用，这是基于wms服务的地址，openlayers调用可用tile或者image切片服务；如果需要矢量数据在select one 中选择geojson调用供vector调用

二、服务发布完毕，引入openlayers

1.vue中引入库

--- npm install ol

2.全局定义

//openLayer全局引用
import ol from 'openlayers';
Vue.prototype.$ol=ol;

3.创建基本的map

1.生成map.vue

<template>
    <div class = "viewDiv" style="position:relative">
        <div id = "map" style="height: 100%;width: 100%;"></div>
    </div>
</template>
<script>
export default {
    data(){
        return{		
		}
    }   
}
</script>
<style lang = "less">
    .viewDiv {
        height:100%;
        width: 100%;
        background: #cccccc;
        position: absolute;
    }
    #map{
        width: 100% !important;
    }
</style>

2.创建地图，我是调用天地图为地图

<template>
    <div class = "viewDiv" style="position:relative">
        <div id = "map" style="height: 100%;width: 100%;"></div>
    </div>
</template>
<script>
export default {
import 'ol/ol.css';
    data(){
        return{
        	map: null,
            url:'xxxx:8090',
            tk:"xxxxxxxx",// 天地图开发者key
            ol:this.$ol,
            ZfeatureLayer19:null	
		}
    },
    mounted(){
    	this.openMap();
    },
    methods:{
    	openMap(){
    		this.overlay = new this.ol.Overlay({
                element: this.container,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250,
                },
            });

            this.currentMap = new this.ol.Map({
                target: 'map',
                view: new this.ol.View({
                    center:[120.00,30.356],
                    projection: 'EPSG:4326',
                    zoom:11.5,

                }),
                layers:[
                    // 天地图
                    new this.ol.layer.Tile({
                        source: new this.ol.source.XYZ({
                            url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + this.tk,
                            maxZoom:18
                        }),
                        visible:false
                    }),
                    new this.ol.layer.Tile({
                        source: new this.ol.source.XYZ({
                            url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + this.tk,
                            maxZoom:18   //设置放大到某一级别
                        }),
                        visible:false
                    }),
                    // 影像图
                    new this.ol.layer.Tile({
                        source: new this.ol.source.XYZ({
                            url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + this.tk,
                            maxZoom:18   //设置放大到某一级别
                        })
                    }),
                    new this.ol.layer.Tile({
                        source: new this.ol.source.XYZ({
                            url: 'http://t3.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + this.tk,
                            maxZoom:18
                        })
                    })
                ],
                controls: [
                ],
                overlays: [this.overlay],
            });
			// 2019图层
                this.ZfeatureLayer19 = new this.ol.layer.Tile({
                    source:new this.ol.source.TileWMS({
                        params:{
                            'SERVICE':'WMS',
                            'VERSION':'1.1.0',
                            'REQUEST':'GetMap',
                            'LAYERS':'xxxx:dk2019',
                            'BBOX':'[468983.25514828326,338072.9067438194,532768.4108643836,3382793.009806053]',
                            'WIDTH':'768',
                            'HEIGHT':'538',
                            'SRS':"EPSG:4549",//根据自己图层的坐标系而定
                            'FORMAT': 'image/png',
                            'RILED': true,
                            'TRANSPARENT':true,
                        },
                        url:"http://xxxxx:8080/geoserver/xxx/wms",
                    }),
                    visible:true,
                    name:'Dk2019',
                    opacity:'0.5'
                });
                this.map.addLayer(this.ZfeatureLayer19)
    	}
    }
}
</script>
<style lang = "less">
    .viewDiv {
        height:100%;
        width: 100%;
        background: #cccccc;
        position: absolute;
    }
    #map{
        width: 100% !important;
    }
</style>

3.显示：代码由于工作原因只能显示部分

---

总结