二、基于Openlayers实现地图的加载与显示

基于上文中配置好的环境，先通过Element Plus实现一个页面的布局，然后基于openlayers加载显示全球瓦片地图。

1. 引入element plus的布局

在Element官网中，对其组件有详细的说明：
https://element-plus.org/zh-CN/component/layout.html
其中，基础组件中的Container容器布局，就提供了多种网络页面的布局方式：
我们选择这种布局方式，先来看一下它的源码：
更改App.vue的内容，实现我们的页面布局：

//<template>标签对内，是页面的内容结构设置，我们按照element plus里布局的方式，设置了头部，然后下面左边有菜单栏，右边是主要的地图展示区域
<template><div id = "app"><el-container class = "app-out-pannel"><el-header class="sys-header">WebGIS项目的页面头部区域</el-header><el-container class = "app-conton-pannel"><el-aside class="sys-menu">这里是左边的菜单栏</el-aside><el-main>这是放地图的区域</el-main></el-container></el-container>
</div>
</template><script>
export default {name: 'App',components: {},
};
</script><style>
html,
body,
#app {position: relative;width: 100%;height: 100%;margin: 0;
}
.app-out-pannel,
.app-content-pannel {height: 100%;
}
.sys-header {background-color: #303133;line-height: 60px;height: 60px;color: #fff;font-size: 600;
}
.sys-menu {background-color: #c0c4cc;
}
</style>

启动项目，先按ctr+S，保存页面，然后在控制台输入：

npm run serve

项目启动后会出现地址，ctr+单击地址，可以转跳倒浏览器，看到页面布局的效果：

注意
安装VUE，启动项目可能会出现报错，

TypeScript intellisense is disabled on template. To enable, configure "jsx": "preserve" in the "compilerOptions" property of tsconfig or jsconfig. To disable this prompt instead, configure "experimentalDisableTemplateSupport": true in "vueCompilerOptions" property.的错误

找到根目录下jsconfig.json文件。

在文件内添加一句

  "jsx":"preserve",

就可以了。

原因：

TypeScript具有三种JSX模式：preserve，react和react-native。
这些模式只在代码生成阶段起作用 - 类型检查并不受影响，这样在检测的时候就不会报错了，因为后面也没有使用ts所以能解决问题就行，不用深究。

2. 加载地图

我们在构建一个openlayersMap的组件，将地图加载到页面的地图容器区域，也就是在App.VUE文件里，我们写的

<el-main>这是放地图的区域</el-main>

这句话所构建的这个区域。

2.1 构建一个openlayersMap组件

在组件文件夹（components）文件夹下，新建一个文件，取名叫openlayerMap.vue。
注意：这里的组件文件命，最好和组件里的名字（name)保持一致。

<template><divid="map"style="width: 100%;height: 100%"></div>
</template><script>
//导入相关配置信息import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import { XYZ } from "ol/source";
import 'ol/ol.css';
import Map from 'ol/Map';
import { defaults } from "ol/control";export default {name: "pointMapInit",data () {return {layer: {//地图底图tiandituVecLayer: '',tiandituImgLayer: '',tiandituCvaLayer: ''},map: null,//地图}},mounted () {this.mapInit();},created () {},methods: {//初始加载地图mapInit () {let that = this;//普通地图that.layer.tiandituVecLayer = new TileLayer({title: 'generalMap',source: new XYZ({url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824',crossOrigin: 'anonymous'}),visible: false});// 卫星影像图层that.layer.tiandituImgLayer = new TileLayer({title: 'yx',source: new XYZ({url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=fea556436d51919f4a429933897be3c1',crossOrigin: 'anonymous',}),visible: true});//普通地图标记that.layer.tiandituCvaLayer = new TileLayer({title: 'generalMapZj',source: new XYZ({url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824',crossOrigin: 'anonymous'}),visible: true});this.map = new Map({target: 'map',// interactions: defaultInteractions().extend([modify]),overlays: [that.overlay],layers: [that.layer.tiandituImgLayer,that.layer.tiandituVecLayer,that.layer.tiandituCvaLayer],view: new View({// projection: 'EPSG:4326',// center: [120.4750, 31.6337],center: [13410926.774433982, 3715530.4937355495],zoom: 12,}),controls: defaults({zoom: true,attributionOptions: {collapsible: false}})});this.$root._olMap = this.map;},},
}
</script><style scoped>
</style>

2.1 将组件加载到页面中

在App.vue中进行配置：

<template><div id = "app"><el-container class = "app-out-pannel"><el-header class="sys-header">WebGIS项目的页面头部区域</el-header><el-container class = "app-conton-pannel"><el-aside class="sys-menu">这里是左边的菜单栏</el-aside><el-main class = "sys-content"><openlayerMap></openlayerMap></el-main></el-container><el-footer class = "sys-footer">这里是项目的注脚部分</el-footer></el-container>
</div>
</template><script>import openlayerMap from './components/openlayerMap'export default {name: 'App',components: {openlayerMap},
};
</script><style>
html,
body,
#app {position: relative;width: 100%;height: 100%;margin: 0;
}
.app-out-pannel {position: relative;width: 100%;height: 100%;
}.app-content-pannel {position: relative;width: 100%;height: 100%;
}
.sys-header {background-color: #303133;line-height: 60px;height: 60px;color: #fff;font-size: 600;
}
.sys-menu {background-color: #c0c4cc;
}.sys-content {padding: 5px;position: relative;width: 100%;height: 100%;
}.sys-footer {background-color: #424347;
}
</style>

地图加载显示的效果：

2.3 注意提示说明

在openlayersMap组件中，我们将div的样式style写在了<template>里构建div的时候，是因为，尝试过把style按顺序写在<style>部分，但是，出现了改区域高度为0而地图无法显示的情况。查了资料，进行了修改。

【WebGIS】二、基于Openlayers实现地图的加载与显示相关推荐

【QT】添加图片资源并使用QImage加载图片显示
文章目录一.QT工程添加图片资源二.QT工程使用QImage加载图片显示一.QT工程添加图片资源到了此步,按下Ctrl+s按键即可. 此时可看到工程下多了以下文件. 二.QT工程使用QImag ...
WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
目录前言 1.效果图 2.实现步骤 3.下一步计划相关Web GIS实战信息: 上一篇博客:WebGIS实战:Web GIS开发环境配置下一篇博客:WebGIS实战:Vue+Openlayers ...
OpenLayers学习笔记中级篇（一、各种地图的加载）
学习了前面的初级篇,相信大家对OplenLayers已经有了一个初步的认识,下面我们再继续深入学习OpenLayers的相关功能! 我们这节主要是加载各种各样的地图,包括在线服务的地图,比如天地图.高 ...
OpenLayers之多源数据加载七：矢量地图
一.矢量地图介绍矢量地图的图形的元素是一些点.线.矩形.多边形.圆和弧线等等,它们都是通过数学公式计算获得的.由于矢量图形可通过公式计算获得,所以矢量图形文件体积一般较小. 矢量图形最大的优点是无论 ...
【Admin后台管理】Geodjango后台显示地图并加载空间字段
原文作者:我辈李想版权声明:文章原创,转载时请务必加上原文超链接.作者信息和本声明. 文章目录前言一.django+admin 二.geodjango+admin 三.报错处理前言在前面的博 ...
OGC标准WMTS服务概念与地图商的瓦片编号流派-web地图切片加载
还不知道地图栅格化切片等相关GIS原理的,推荐阅读<webGIS底图栅格化与实时数据合成处理原理,地图API设计,xyz加载> OGC概念 OGC全称--开放地理空间信息联盟(Open G ...
cocos2dx 大地图分块加载的研究(初)
本文转自http://blog.csdn.net/dinko321/article/details/46739563 项目里面需要加载一个很大的地图,目测最少是4096x4096的分辨率. 先不考虑什 ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
swift 百度地图加载与百度地图电子围栏加载
最近在写百度地图电子围栏加载,研究源码,也花了一些时间. 1.百度电子围栏整体思路 1)用户创造实体,赋予监控权限 2)对该实体创造电子围栏,有服务端和本地端两种方式,先创造实体,上传到的服务器中.在 ...

【WebGIS】二、基于Openlayers实现地图的加载与显示