场景

Openlayers下载与加载geoserver的wms服务显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531

在上面使用Openlayers加载wms服务显示地图的基础上，如果想要在Vue中使用Openlayers加载地图怎么用。

上面加载的wms的地图服务

Openlayers的官方Quick start中给的例子使用的是OSM

https://openlayers.org/en/latest/doc/quickstart.html

OSM

OpenStreetMap（简称OSM）开源wiki地图，很多人们习以为常可以随便拿来用的地图，其实有很多法律和技术上的限制，这些限制使得像地图这类的地理资讯无法有创意、有效率地被再利用。开放街道地图成立动机在于希望能创造并且提供可以被自由地使用的地理资料（像街道地图）给每个想使用的人，就像自由软件所赋予使用者的自由一样。

OpenStreetMap（简称OSM）是一个网上地图协作计划，目标是创造一个内容自由且能让所有人编辑的世界地图。

OSM的地图由用户根据手持GPS设备、航空摄影照片、其他自由内容甚至单靠本地知识绘制。网站里的地图图像及矢量数据皆以Open Database License(ODbL)授权。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先搭建一个Vue项目，这里使用快速开发框架搭建如下

若依前后端分离版手把手教你本地搭建环境并运行项目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

Vue中安装Openlayers

npm install ol

然后我们新建一个组件olMap.vue

<template><div id="map" class="map"></div>
</template><script>
import "ol/ol.css";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";export default {name: "olMap",data() {return {};},mounted() {this.initMap();},methods: {initMap() {new Map({layers: [new TileLayer({source: new OSM(),}),],target: "map",view: new View({center: [0, 0],zoom: 2,}),});console.log("init finished");},},
};
</script><style scoped>
.map {width: 100%;height: 400px;
}
</style>

然后在需要显示地图的页面上引入该组件并声明

<template><div class="app-container home"><el-row :gutter="20"><olMap></olMap></el-row><el-divider /></div>
</template><script>
import olMap from '@/components/olMap/olMap'
export default {name: "index",components: {olMap},

运行项目查看效果

Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图相关推荐

Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
bug解决-Vue中img图片加载失败解决方案
Vue 中img图片加载失败解决方案 bug:assets文件下的图片动态取得话,显示不出来. 解决方法:把图片放到public文件夹下 public是直接原封不动打包到dist里面
vue 中实现异步加载模块
前提:使用vue官方脚手架搭建(webpack) 使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,这样打包使单页面的应用的体积比 ...
vue中echarts初次加载图很小的问题
在vue的mounted中如果初始化数据的话,dom元素还没有完全加载完成,这时候echarts还是px和%混用,会造成加载出来的echarts很小处理方式,加载完成之后重绘一下: $(docume ...
vue中h5下滑加载更多
vue中在方法中 methods:{// 触底加载更多handleScroll() {let scrollTop = document.documentElement.scrollTop || doc ...
如何在Vue中使用lottie加载SVG动画
背景最近刚搞完官网,是时候分享一波我在码官网过程中遇到的一些小困难.当然,我会分享一些比较重点的内容.现在网页上比较复杂的动画基本都采用 SVG,像 Ant Design 全家桶的官网,首页的 Ba ...

Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图

场景

OSM

实现

Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图相关推荐

最新文章

热门文章