使用自定义地图，少不了Gis。这里推荐使用Qgis进行绘制地图。
1、Qgis的下载、安装、基本的使用
这里可以查看我之前写过的文章：
这样结束之后，我们可以用gis工具，生成一个shp文件，这个文件我们在之后会用到。
2、配置并启动geoserver
geoserver是用来发布gis服务的。也就是说，我们制作好的地图需要发布在这个服务器上，最终我们前端引入一个地址即可实现地图的开发。
2-1、下载geoserver
官网地址：GeoServer
下载稳定版即可。下载完成之后，无脑安装即可。
2-2、配置环境变量
这里需要配置的环境变量就是—java。
因为geoserver依赖java，所以需要下载安装jdk。
第一步，下载jdk（这里提供jdk1.8版本 百度网盘 请输入提取码 提取码：6adf）。也可以自行下载其他版本。
第二步，配置jdk环境变量。系统变量中新建 JAVA_HOME 。变量值是安装jdk的目录，比如是D:\Program Files (x86)\Java\jdk1.8.0_181））。再找到 Path (没有的话就新建一个)，它的值加上 ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; （注意前边后边的分号）。最后，再建一个变量 CLASSPATH，它的值就是 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar （注意千前边是有一个点的）。java环境变量配置完毕。
2-3、启动geoserver
找到geoserver安装的目录，找到bin文件夹，管理员身份运行 start.bat.
最后cmd中出现如下字样即为启动成功：
2-4、打开geoserver页面
默认情况下，启动页面在本地8080端口开启。http://localhost:8080/geoserver/web/
初始用户名和密码分别为 admin \ geoserver.
界面如下：
3、发布Gis服务
登陆成功后，界面如下，我们需要关注的是左侧红框内的部分。
第一步，把我们之前用qgis生成shp文件夹拿出来（注意不仅仅是shp这一个文件，而是生成那整个文件夹）。拿出来之后，找到geoserver的安装文件夹中，找到datadir目录，将整个文件夹放进去。如下：
第二步，新建一个工作区，命名为geotest，点击保存。
第三步，点击数据存储。点击新建shapefile。选择工作区，填写数据名称，选择我们刚才放在daradir目录中的shp文件，点击保存即可。
第四步，发布图层。新建保存完成之后，出现如下界面，点击右侧发布按钮就剋是进入发布流程。
点击发布之后，需要对图层的边界进行配置，如下：
然后点击保存即可完成发布。
最后，我们点击左侧菜单的“layer preview”。进入如下界面，搜索一下我们刚刚创建的图层名称：
点击最右侧的“openlayers”，就可以在新窗口看到我们发布的gis地图了。如下所示：
地址栏中的地址就是我们一会要用到的gis地图服务了。
4、vue中使用openlayer
忙完服务端的事情，就转到前端。
我们需要openlayer来解析gis服务提供的地图。openlayer的官网如下，可以点击去看看是什么：
OpenLayers v6.12.0 API - Index
首先，安装openlayer
npm i ol -S然后，局部引入openlayer的样式和相关方法。比如在map.vue组件中引入，以下就是完整的地图代码。
<!--
地图图层
MapLayer -->
<template>
<div class="map-layer" ref="map"></div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Image as ImageLayer} from 'ol/layer';
import {ImageWMS} from 'ol/source';
import {fromLonLat} from 'ol/proj';
export default {
name: 'MapLayer',
data () {
return {
map: null
}
},
methods: {
initMapLayer () {
try {
const container = this.$refs.map;
const layer = new ImageLayer({
source: new ImageWMS({
ratio: 1, //设置为 1
url: 'http://localhost:8080/geoserver/nurc/wms',
// service=WMS&version=1.1.0&request=GetMap&layers=nurc%3AImg_Sample
// &bbox=-130.85168%2C20.7052%2C-62.0054%2C54.1141
// &width=768&height=372&srs=EPSG%3A4326&styles=&format=application/openlayers
params: {
SERVICE: 'WMS',
REQUEST: 'GetMap',
LAYERS: 'nurc:Img_Sample',
STYLES: '',
VERSION: '1.1.0',
FORMAT: 'image/jpeg',// 这个参数设置不对 不显示
SRS: 'EPSG:4326',
BBOX: [-130.85168, 20.7052, -62.0054, 54.1141]
},//根据图层发布的坐标系更改
serverType: 'geoserver',
})
});
this.map = new Map({
target: container,
layers: [layer],
view: new View({
center: [-78.66211, 44.96605], //这是地图初始化时显示的中心点 ，一定要给在地图范围里，不然显示不出
projection: 'EPSG:4326',
zoom: 8
}),
});
console.log('this.map', this.map);
} catch (e) {
console.log(e);
}
},
moveMap (position) {
let to = fromLonLat(position);
let view = this.map.getView();
// 设置地图等级
view.setZoom(6);
view.animate({
center: to,
duration: 0
});
},
},
mounted () {
this.initMapLayer();
}
}
</script>
<style lang='scss' scoped>
.map-layer {
width: 100%;
height: 100%;
}
</style>5、使用瓦片服务展示地图
项目中，可能会使用瓦片服务地址，叠加多个图层。这个相对于上边只展示一个图层，复杂一些。
直接上代码，里边一些样式函数可以忽略（style属性）。
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Image as ImageLayer} from 'ol/layer';
import {ImageWMS} from 'ol/source';
import {fromLonLat, transform} from 'ol/proj';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import {defaults} from 'ol/interaction';
import DragRotateAndZoom from 'ol/interaction/DragRotateAndZoom';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import * as olLoadingstrategy from 'ol/loadingstrategy';
// 以下是方法
initMapLayer () {
try {
const container = this.$refs.map;
const ipgeserver = 'https://172.17.11.202:8323';
const map_config = {
// 矢量瓦片服务地址
// vectorTile_url:"http://172.17.11.103:8323/geoserver/gwc/service/wmts",
vectorTile_url:ipgeserver + "/geoserver/gwc/service/tms/1.0.0/VectorTile%3Avtmap@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf",
// 矢量瓦片服务的图层名称
layerName_vt : 'LXGIS:lxmap',
// 图层地址
wms_data_url:ipgeserver + "/geoserver/DP/wms",
// 图层名称
wms_name: "dpRailway",
// 图片图层地址
railwaywmsUrl: ipgeserver + "/geoserver/DP/wms",
// 图片图层名称
railwaywmsLname: 'DP:dpRailway',
// 矢量图层地址
stationwfsUrl:ipgeserver + "/geoserver/DP/ows?service=WFS&version=1.0.0&request=GetFeature&maxFeatures=5000&",
// 矢量图层名称
stationwfsLname: 'DP%3AstationData',
};
// [113.631419, 34.753439]是地理坐标 郑州为中心
const map_center = transform([113.631419, 34.753439], 'EPSG:4326', 'EPSG:3857');
// 创建视图
const view = new View({
center: map_center,
zoom: 8,
maxZoom:15,
minZoom:4
});
// 创建瓦片图层
const vector_layer = new VectorTileLayer({
id: 'vector_layer',
source: new VectorTileSource({
format: new MVT(),
url: map_config.vectorTile_url
}),
style: createlxmapStyle(view)
})
// 创建地图
this.map = new Map({
interactions: defaults(/*{doubleClickZoom:false}*/).extend([
new DragRotateAndZoom(),
]),
target: container,
layers: [vector_layer],
view: view
});
// 添加图片图层
const railwayLayer = new ImageLayer({
id: 'railwayLayer',
zIndex: 4,
source: new ImageWMS({
url: map_config.railwaywmsUrl,
params: {
'LAYERS': map_config.railwaywmsLname
},
ratio: 2.0,
serverType: 'geoserver'
})
});
this.map.addLayer(railwayLayer);
// 创建矢量图层
const stationLayer = new VectorLayer({
zIndex: 2,
maxResolution: 10000,
minResolution: 15,
source: new VectorSource({
format: new GeoJSON(),
url: function (extent) {
return map_config.stationwfsUrl +
'typeName=' + map_config.stationwfsLname + '&outputFormat=application/json&srsname=EPSG:3857&' +
'bbox=' + extent.join(',') + ',EPSG:3857'
},
strategy: olLoadingstrategy.bbox
}),
style: function (feature, resolution) {
return StationStyle(feature, resolution)
}
})
// 创建的图层均要添加到map上
this.map.addLayer(stationLayer);
} catch (e) {
console.log(e);
}
},
注意：这里需要注意如果最后你的地图没有出来，有以下可能性：1、map这个div你没有给宽高，和echart一样，都是用canvas渲染的，没有宽高肯定不行；2、引入服务的参数没有完全写对，就是PARAMS这个参数，它内部的所有属性和服务地址？号后边的参数是一样的，注意对比清楚。
最后，就可以在页面中看到自己的地图了。
end~