使用PostGIS+GeoServer+Openlayer+Vue构建简单的web地图应用

一、将shx通过postgis导入

1、创建数据库

2、右键–>新建对象–>新建扩展

3、菜单栏点击插件–>打开postgis 也可通过开始菜单
注意点：文件路径不可有中文，文件格式应为utf-8

刷新之后会出现新的数据表

二、设置geoserver

1、新建工作区

2、创建数据存储

3、创建样式

4、发布图层
步骤：1、新建图层点击发布–>2、设置边框–>3、点击第三张图的发布–>4、选择line–>5、点击保存–>6、照以上步骤以布其余的图层

5、预览图层
找到创建的图层点击openlayers进行预览

三、openlayer

vue2+openlayer6

<template><div class="home"><div id="map" ref="map"></div></div>
</template><script>
import "ol/ol.css";
import ImageWMS from "ol/source/ImageWMS";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import View from "ol/View";
import { Image as ImageLayer, Tile as TileLayer } from "ol/layer";export default {name: "Home",data() {return {map: ""};},methods: {// 初始化一个openLayers的视图initMap() {var layers = [new TileLayer({source: new OSM()}),new ImageLayer({extent: [-13884991, 2870341, -7455066, 6338219],source: new ImageWMS({url: "http://localhost:8080/geoserver/web_map/wms",params: {FORMAT: "image/png",VERSION: "1.1.1",tiled: true,STYLES: "",LAYERS: "web_map:ne_110m_admin_0_countries"},ratio: 1,serverType: "geoserver"})})];this.map = new Map({layers: layers,target: "map",view: new View({center: [-74.047185, 40.679648],zoom: 2,code: "EPSG:4326",units: "degrees"})});}},mounted() {this.initMap();}
};
</script><style lang="less">
#map {width: 100%;height: 80vh;
}
</style>

推荐视频：使用PostGIS，GeoServer和Openlayer构建简单的web地图应用_哔哩哔哩_bilibili

使用PostGIS+GeoServer+Openlayer+Vue构建简单的web地图应用相关推荐

三种方法构建简单的WEB服务器！
<Essential ASP.NET 本质论>举例了Socket编程的基本知识,我稍加修改弄了个简单的应用. 你可以将生成的EXE文件拷贝到服务器上,这样通过任意的WEB浏览器都可以获得该 ...
echarts+vue实现简单的中国地图且数据下钻（简洁适合小白版）
首先,在实现地图之前,需要实现地图的json文件(包含各省份和整个中国地图),文件可从阿里云可视化数据平台下载网址:http://datav.aliyun.com/portal/school/atla ...
spark restful_使用Spark构建简单的RESTful API
spark restful 免责声明 :这篇文章是关于名为Spark的Java微型Web框架的,而不是关于数据处理引擎Apache Spark的 . 在此博客文章中,我们将看到如何使用Spark构建简 ...
使用Spark构建简单的RESTful API
免责声明 :这篇文章是关于名为Spark的Java微型Web框架的,而不是关于数据处理引擎Apache Spark的 . 在此博客文章中,我们将看到如何使用Spark构建简单的Web服务. 如免责声明 ...
用 Python 开发简单交互式 Web 应用
今天分享一个让开发交互式 Web app 超级简单的工具.不会 HTML,CSS,JAVASCRIPT 也没事. 交互式 Web app 非常实用,比如说做一个问卷调查页面.一个投票系统.一个信息收集 ...
最简单的WebGIS地图引擎，最丰富的历史地理知识
无意中发现了一个Web地图,可以称的上是一个简单的web地图引擎,先看看界面,下载链接在最后: 战国时期世界版图西汉汉武帝时期世界版图大唐帝国时期世界版图清朝康熙年间世界版图放大一级有国家领导 ...
react构建淘票票webapp，及react与vue的简单比较。
前言前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
vue中使用Antv g6构建简单流程图
vue中使用Antv g6构建简单流程图前端小白第一次使用,项目需要一个流程图,看了一些博客,简单的写了一个,但是还是没实现项目的需求,希望有会的人帮忙指点一下.项目需要实现的是:可以自定义添加节点 ...
Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）
Asp.net+Vue2构建简单记账WebApp之一(设计) Asp.net+Vue2构建简单记账WebApp之二(使用ABP迅速搭建.Net后台) Asp.net+Vue2构建简单记账WebApp之 ...

使用PostGIS+GeoServer+Openlayer+Vue构建简单的web地图应用

一、将shx通过postgis导入

二、设置geoserver

三、openlayer

使用PostGIS+GeoServer+Openlayer+Vue构建简单的web地图应用相关推荐

最新文章

热门文章