vue3结合openlayers,geoserver实现GIS一张图(WebGIS)

这篇具有很好参考价值的文章主要介绍了vue3结合openlayers,geoserver实现GIS一张图(WebGIS)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.前言

        不知不觉一年又要过去了,接触开发也就是这几个月的事情,感觉时间过的真快,今天就是除夕了,祝各位新年快乐呀,话说回来,其实在接触学习WebGIS的过程中还是蛮迷茫的,自己虽然是地信的学生,对于地理方面还有有一些自己的理解,但平时专业课学习的就是arcgis空间分析,遥感图像处理,WebGIS的部分并不是太重视,可能是因为没有那么多时间,毕竟这需要扎实的前端技能,不是一朝一夕就可以说明白的,当然了我会继续钻研下去的,大家一起加油。

 二.言归正传

A.演示


        我做的这个一张图展示的数据是有关江苏的行政境界面,线,点,还有乡道,县道,国道,水系线,水系面等

vue3结合openlayers,geoserver实现GIS一张图(WebGIS),javascript,vue.js,前端,arcgis,postgresql,web

 

vue3结合openlayers,geoserver实现GIS一张图(WebGIS),javascript,vue.js,前端,arcgis,postgresql,web

B.过程概述


(1)获取并处理相关数据

        这个数据是我在做第12届全国大学生GIS大赛的时候直接就地取材,下面是对应的博客https://blog.csdn.net/weixin_73810008/article/details/135921780?spm=1001.2014.3001.5502,我处理出我需要的数据并导出到相应的文件夹中

vue3结合openlayers,geoserver实现GIS一张图(WebGIS),javascript,vue.js,前端,arcgis,postgresql,web


 

(2)通过QGIS将数据导入对应数据库 

        其实这里我是走了弯路的,arcgis好像也可以直接与数据库继续连接,但是好像要把什么文件配置到指定地点,而且它对postgresql版本也有限制,我觉得用的不舒服,所以直接采用QGIS导入,但前提是电脑已经下载了QGIS和postgresql。

建立数据库

vue3结合openlayers,geoserver实现GIS一张图(WebGIS),javascript,vue.js,前端,arcgis,postgresql,web

建立数据库连接

vue3结合openlayers,geoserver实现GIS一张图(WebGIS),javascript,vue.js,前端,arcgis,postgresql,web

 

导入数据 

        最好导入的数据坐标系都是3857,因为市面上除了高德百度的地图的坐标系进行了偏移,其它基本都是基于Web墨卡托投影,也就是我们熟知的3857,将所有需要的数据导入完成后,刷新数据库,看对应的表有没有进入数据库中

vue3结合openlayers,geoserver实现GIS一张图(WebGIS),javascript,vue.js,前端,arcgis,postgresql,web


 

(3)运行geoserver 

        先创个新的工作空间,再添加新的存储仓库到这个空间中,再根据自己需要选择矢量数据源,具体的geoserver操作大家可以查询,这里不过多赘述

vue3结合openlayers,geoserver实现GIS一张图(WebGIS),javascript,vue.js,前端,arcgis,postgresql,web

vue3结合openlayers,geoserver实现GIS一张图(WebGIS),javascript,vue.js,前端,arcgis,postgresql,web 


 

(4)发布地图服务 

        点击相应位置,发布数据库中需要的图层   vue3结合openlayers,geoserver实现GIS一张图(WebGIS),javascript,vue.js,前端,arcgis,postgresql,web


 

(5)WebGIS开工 ,代码演示

        启动vue项目,下载需要的ol包,通过点击单选框变换需要展示的图层

<template>
  <div id="map">
    <ul id="transform">
        <li v-for="layerName in layerNames" :key="layerName">
            <input type="radio" :value="layerName" v-model="selectedLayer" @change="switchLayer($event.target.value)">
            <label>{{ layerName }}</label>
        </li>
    </ul>
  </div>
</template>

<script setup>
    import mapboxgl from 'mapbox-gl';
    import 'mapbox-gl/dist/mapbox-gl.css';
    import { Map, View } from 'ol';
    import { fromLonLat} from 'ol/proj';
    import XYZ from 'ol/source/XYZ';
    import TileLayer from 'ol/layer/Tile';
    import TileWMS from 'ol/source/TileWMS'
    import {defaults,FullScreen,MousePosition,ScaleLine} from 'ol/control'    
    import { onMounted } from 'vue';
    import { ref } from 'vue';

    //mapboxgl.accessToken = 'pk.eyJ1IjoiY3VkODUiLCJhIjoiY2xrYnFncXZhMGc1cTNlbmFrNHN1N2cxeCJ9.69E3f8nMJkvqQDRhLSojVw';

    let activeLayer = ref(null);
    let selectedLayer=ref('')
    var map

    const layerNames = ['JsXd','JsXiand','JsSd','JsGd', 'JsWaterLine','JsWaterSurface','JsABP','JsABoundaryL','JsAdministrativeInterface']

    function switchLayer(layerName) {
        if (activeLayer.value) {
            let layerArray = map.getLayers().getArray()
            map.removeLayer(layerArray[1]);
        }
        const newLayer = createTileLayer(layerName);
        map.addLayer(newLayer);
        activeLayer.value = newLayer;
    }
    function createTileLayer(layerName){
        return new TileLayer({
            source:new TileWMS({
                url:'http://localhost:8080/geoserver/gis/wms',
                params:{'LAYERS':`gis:${layerName}`,'TILED':true},
                serverType:'geoserver',
                transition:0
            })
        })
    }
    onMounted(()=>{
        let baseMap = new TileLayer({
            source:new XYZ({
                url:'https://api.mapbox.com/styles/v1/mapbox/streets-v12/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY3VkODUiLCJhIjoiY2xrYnFncXZhMGc1cTNlbmFrNHN1N2cxeCJ9.69E3f8nMJkvqQDRhLSojVw'
            })
        })
        map = new Map({
            layers:[baseMap],
            target:'map',
            view:new View({
                zoom:10,
                center:fromLonLat([118.7915619,32.0615513],'EPSG:3857')
            }),
            controls:defaults().extend([
                new FullScreen(),
                // new MousePosition(),
                new ScaleLine()
            ])
        })
    })
</script>
    
<style scoped>
    #map{
        position: relative;
    }
    #transform{
        list-style: none;
        position: absolute;
        top:10px;
        right:10px;
        z-index: 1;
        width: auto;
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #transform li{
        margin-bottom: 5px;
    }
    #transform li:last-child{
        margin-bottom: 0;
    }
    #transform input[type="radio"]{
        margin-right: 5px;
    }
    #transform label {
        cursor: pointer; 
        user-select: none; /* 防止文本被选择 */
    }
    /* .ol-full-screen{
        border-radius: 5px;
    } */
</style>

 

三.总结


         这篇文章我淡化操作步骤,相信大家对应软件的使用是没问题的,所以我只提供核心的代码和思路,希望对大家有所帮助。

        像这样一个简单的项目就把前后端以及GIS软件等等有机结合到一起,我学习WebGIS也是瞎子摸象,笔者希望这篇文章可以给读者有一定的启发。大家也可以一起交流,互相学习进步。希望可以收藏点赞加关注。

      文章来源地址https://www.toymoban.com/news/detail-825543.html

         

到了这里,关于vue3结合openlayers,geoserver实现GIS一张图(WebGIS)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • OpenLayers实战,OpenLayers结合下拉菜单实现城市切换,动态切换城市边界到地图视图视角范围内

    专栏目录: OpenLayers实战进阶专栏目录 本章是OpenLayers综合实战案例,使用OpenLayers结合下拉菜单实现城市切换,动态切换城市边界到地图视图视角范围内。 本章需要使用到ElementUI的下拉框组件和OpenLayers的TopoJson格式解析地市边界数据并负责渲染,通过动态创建style样式来切换

    2024年02月06日
    浏览(52)
  • 财务思维一张图

    系统研读了《肖星的财务思维课》和得到《贾宁·财务思维课》,尝试用一张最简单的图总结财务思维所学到精髓吧。 《肖星的财务思维课》 得到《贾宁·财务思维课》 附: 【清华大学】最好的财务课《商业的财务逻辑》(全7课)肖星教授 【清华大学】最好的财务课《商业

    2024年01月19日
    浏览(59)
  • 【GIS开发】OpenLayers在线瓦片数据源汇总

    瓦片地图(切片地图)源于一种大地图解决方案,针对一整块非常大的地图进行切片,分成很多相同大小的小块地图,在用户访问的时候,再一块一块小地图加载,拼接在一起,从而还原成一整块大的地图,如果要提高Web地图的访问速度,使用瓦片地图是非常有效的方法。

    2023年04月24日
    浏览(45)
  • 一张图学会python递归函数

    递归函数属于那种“难者不会,会者不难”的事情,回想自己大学时学习递归函数的经历,简直是痛不欲生,代码里没有一行是看不懂的,但就是理解不了它是怎样运行的。 等到自己悟通了原理,就又会觉得这东西太简单了,不明白自己当初为何想不清楚。 对于递归函数,

    2023年04月09日
    浏览(38)
  • 【Linux】一张图了解系统文件

    首先先认识磁盘结构 系统文件分布图 文件查找 文件删除 文件的增删改查都是围绕 inode 来完成的,所以当我们要进行文件删除的时候,只需要通过 inode 来获取到它对应的 block bitmap 和 inode bitmap 数据块容器和保存文件属性的位置置为 0即可 ,如果想要恢复,通过一定的方法设

    2024年02月11日
    浏览(49)
  • 一张图搞懂微服务架构设计

    当前,微服务架构在很多公司都已经落地实施了,下面用一张图简要概述下微服务架构设计中常用组件。不能说已经使用微服务好几年了,结果对微服务架构没有一个整体的认知,一个只懂搬砖的程序员不是一个好码农! 在上图中可以看到,Nginx作为整个架构的流量入口,可以

    2023年04月17日
    浏览(54)
  • uniapp:手写签名,多张图合成一张图

    要实现的内容 :手写签名,协议内容。点击提交后:生成1张图片,有协议内容和签署日期和签署人。 实现的效果图如下: 1、签名页面

    2024年02月15日
    浏览(92)
  • 一张图快速了解 Istio 的 EnvoyFilter

    EnvoyFilter 提供了一种机制来定制 Istio Pilot 生成的 Envoy 配置。使用 EnvoyFilter 修改某些字段的值,添加特定的过滤器,甚至添加全新的侦听器、集群等等。 这个功能必须谨慎使用,因为不正确的配置可能会破坏整个网格的稳定性。与其他 Istio 网络对象不同,EnvoyFilter 是叠加应

    2024年02月08日
    浏览(50)
  • GLES学习笔记---立方体贴图(一张图)

    立方体贴图 如上图是一张2D纹理,我们需要将这个2D纹理贴到立方体上,立方体有6个面,所以上面的2D图分成了6个面,共有14个纹理坐标 上边的立方体一共8个顶点坐标,范围是[-1, 1]; 我们要做的是将纹理图贴到这6个面上面 我们绘制的时候使用了VBO、VAO、EBO、 indices里面是绘

    2024年01月19日
    浏览(53)
  • vue3结合three.js实现3D带有交互的动画

    three.js引入 安装轨道控件插件: 安装渲染器插件: vue文件中引用: 在页面中创建场景 创建一个透视相机 初始化渲染器 初始动画混合器 参数:rootObject 混合器播放的动画所属的对象。就是包含动画模型的场景对象。 常用参数和属性: .time 全局的混合器时间。 .clipAction(Ani

    2024年02月04日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包