cesium加载geoserver发布的服务遇到的问题

关于我cesium加载geoserver发布的服务完整版

1首先准备好一份shp数据，地理空间数据云平台多得很

2发布geoserver服务

发布geoserver服务过程中我也遇到了很多的坑，别人比较顺利，但是我是遇到比较多的坑的。我使用的是tomcat和geoserver.war都是免安装版本的。geoserver.war我的博客有.
链接如下: geoserver.war.
相关的部署geoserver也在这个资源里面有

3Cesium环境搭建

我使用的vue+cesium。cesium的下载安装我就不说了。主要是vue.config.js的配置问题。在项目文件夹新建vue.config.js。复制下列的代码。

const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([{ from: 'node_modules/cesium/Build/Cesium/Workers', to: 'Workers' }]),
            new CopyWebpackPlugin([{ from: 'node_modules/cesium/Build/Cesium/ThirdParty', to: 'ThirdParty' }]),
            new CopyWebpackPlugin([{ from: 'node_modules/cesium/Build/Cesium/Assets', to: 'Assets' }]),
            new CopyWebpackPlugin([{ from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'Widgets' }])
        ]
    }
}

4初始化三维球，并加载数据

<template>
    <div class="mapBox">
        <div id="earthContainer">
        </div>
    </div>

</template>

<script>
    window.CESIUM_BASE_URL = '/';
    import * as Cesium from 'cesium'
    import 'cesium/Build/Cesium/Widgets/widgets.css'

    Cesium.Ion.defaultAccessToken = '你的token'//这个我之前写的有

    export default {
        name: "earth",
        mounted() {
            var viewer = new Cesium.Viewer("earthContainer",{
                // geocoder: false,//地理位置查询定位控件，默认使用bing地图服务
                homeButton: false,//默认相机位置
                sceneModePicker: false, //是否显示投影方式控件//3D、2D和哥伦布模式的切换按钮
                baseLayerPicker: true,  //是否显示图层选择控件//选择地形、影像等图层
                navigationHelpButton: false, //是否显示帮助信息控件//显示默认的相机控制提示
                geocoder:false, //是否显示地名查找控件
                animation: false, //是否显示动画控件//控制场景动画的播放速度.
                timeline: false, //是否显示时间线控件
                fullscreenButton: false,//是否全屏显示
                vrButton: false,
                shadows: false, //影子
                infoBox: false, //是否显示点击要素之后显示的信息

            });
            var terrain=new Cesium.createWorldTerrain({
                requestWaterMask:true,
                requestVertexNormals:true
            });
            viewer.terrainProvider=terrain;//加入世界地形图
            viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息
            viewer.scene.debugShowFramesPerSecond=true;//显示帧速
            //添加geoserver发布的wms数据
            //这里是初始化wms实例
             var imglayerp=new Cesium.WebMapServiceImageryProvider({//这里的new Cesium.WebMapServiceImageryProvider一定要与你发布的图层对应。
             //关于cesium加载geoserver发布的不同数据，我吧参考的博客放在文章末尾，比较清楚。
                url:"http://192.168.31.137:8085/geoserver/gyshp/wms",//你发布的图层
                layers: 'gyshp:province_region',//图层名
                parameters : {
                    transparent : true,     //是否透明
                    format : 'image/png',
                    srs: 'EPSG:4326',
                    styles:''
                }

            });
            viewer.imageryLayers.addImageryProvider(imglayerp);//加载图层
            }

最后的效果

参考文章

cesium加载不同的geoserver发布的服务
geoserver安装教程
vgeoserver设置发布的服务的style
geoserver发布shp服务