1、快速搭建

1. 引入

npm下载openlayers：npm i -S ol

在.vue文件里引入相关文件

此demo引入bootstrap和jquery和popper，npm分别为：

npm install --save bootstrap

npm install --save jquery

npm install --save popper,

popper是弹出框插件

在config文件夹下创建mapconfig.js用来设置地图的图层、中心点坐标、初始地图的缩放等级、限制地图移动范围

在olmap.vue中进行调用，生成地图

Html布局：定义map

首先，获取地图的标签this.$refs.rootmap，new Map()对象生成的就是地图本身，基本内容下图已标注，最后是将地图变量绑定到data中。

Html布局如下图代码所示。

信息窗体的标签不能写在地图的标签内，要单独出来。

Js的方法如下图：

首先，将图标的样式、偏移量单独写，后续直接添加到每个地标对象上即可，然后进行循环地标点数组，设置图标底部文字的样式和内容，这里可以把样式单独提取出去，后续循环时调用添加文字的方法setText()即可，循环添加点标记时注意作用域的问题。

然后是点击点标记进行弹窗展示信息的方法，new overlay（）是openlayers的信息窗体的方法，需要将内容集成到此方法中，然后this.map.addOverlayer()是将窗体承载到地图上。

首先是获取该行政区的geojson坐标，此例为呼和浩特市的坐标点，此demo的geojson坐标数据放在src/config/huhehaote3.js中。

首先，将定义的填充颜色，边界颜色、和填充文字单独提取到new style()对象中，然后定义资源图层，将样式对象添加进去，引入new GeoJSON()对象，用于加载geojson数据，需要注意的是因为坐标系的不同，需要设置转换格式，不然不显示遮罩区域也不会报错