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是弹出框插件
2. 初始化map
在config文件夹下创建mapconfig.js用来设置地图的图层、中心点坐标、初始地图的缩放等级、限制地图移动范围
在olmap.vue中进行调用，生成地图
Html布局：定义map
首先，获取地图的标签this.$refs.rootmap，new Map()对象生成的就是地图本身，基本内容下图已标注，最后是将地图变量绑定到data中。
2、 功能的创建
1. 多个点标记及信息窗体
Html布局如下图代码所示。
信息窗体的标签不能写在地图的标签内，要单独出来。
Js的方法如下图：
首先，将图标的样式、偏移量单独写，后续直接添加到每个地标对象上即可，然后进行循环地标点数组，设置图标底部文字的样式和内容，这里可以把样式单独提取出去，后续循环时调用添加文字的方法setText()即可，循环添加点标记时注意作用域的问题。
然后是点击点标记进行弹窗展示信息的方法，new overlay（）是openlayers的信息窗体的方法，需要将内容集成到此方法中，然后this.map.addOverlayer()是将窗体承载到地图上。
2. 实现行政区域的遮罩
首先是获取该行政区的geojson坐标，此例为呼和浩特市的坐标点，此demo的geojson坐标数据放在src/config/huhehaote3.js中。
首先，将定义的填充颜色，边界颜色、和填充文字单独提取到new style()对象中，然后定义资源图层，将样式对象添加进去，引入new GeoJSON()对象，用于加载geojson数据，需要注意的是因为坐标系的不同，需要设置转换格式，不然不显示遮罩区域也不会报错
网友评论