前言

使用openlayer实现选房平面图的需求：1.选用地图背景图2.将geojson数据（没有后台所以就写死了2个数据）生成房间图层块覆盖背景图上对应的房间块3.根据条件，可选区域与不可区域图形块颜色不一样4.点击图层能获取到对应的数据,同时选中的图层块样式发生改变

代码详解

地图背景展示

根据官方案例，只需要提供一个div，然后将Map对象挂载到div元素上

const extent = [0, 0, 50, 50];//地图范围
const projection = new Projection({//地图投影code: 'xkcd-image',units: 'pixels',extent,
});
this.map = new Map({layers: [new ImageLayer({source: new Static({ //这就是静态背景图片url: '/img/A-10.png',//图片路径，放在静态文件夹public(vue-cli3.0)或static(vue-cli2.0)里，根据脚手架版本来projection,imageExtent: extent,//图片位置}),}),vectorLayer,//多个图层，下面会讲到],target: 'map',view: new View({projection,center: getCenter(extent),zoom: 1,//地图默认比例maxZoom: 4,//地图最大比例minZoom: 1,//地图最小}),});

这样一个带图片背景的地图就做好了
然后就要渲染上面的图层了

图层渲染

步骤大概为：GeoJSON转换json数据为feature->vectoryresource->获取样式->vectorlayer->map添加vectorlayer

根据GeoJSON获取图层

const geojsonObject = {type: 'FeatureCollection',crs: {type: 'name',properties: {name: 'EPSG:3857',},},features: [{type: 'Feature',geometry: {type: 'Polygon',coordinates: [[[14.599609375, 16.9677734375], [21.6796875, 17.08984375], [21.6796875, 4.7607421875], [14.84375, 4.7607421875]]],},id: '007ABA46-7B0C-4F90-B6D4-8F6546363E',properties: { modelId: '2311', id: '007ABA46-7B0C-4F90-B6D4-8F6565EA2B2E', type: 'room' },},{type: 'Feature',geometry: {type: 'Polygon',coordinates: [[[21.5576171875, 17.08984375], [28.6376953125, 17.08984375], [28.515625, 5.0048828125], [21.5576171875, 5.126953125]]],},id: '007ABA46-7B0C-4F90-B6D4-8F6565EA2B2E',properties: { modelId: '2310', id: '007ABA46-7B0C-4F90-B6D4-8F6565EA2B2E', type: 'room' },},],};
以上是geoJSON的内容，properties是可以给图层添加的一些参数，便于处理业务需要，type即指定feature的类型，这里是指定为多边形，coordinates为多边形的坐标(new GeoJSON()).readFeatures(geojsonObject)//将GeoJSON转换成features

获取样式

主要是边框色，填充色以及填充的文本样式

//获取样式方法
//可将feature的数据传过来进行判断返回对应的样式const getStyles = (param) => {console.log(param);const style = new Style({stroke: new Stroke({//边框color: '#2d9fd8',width: 0,}),fill: new Fill({//填充色color: '#2d9fd8',//color:[0, 11, 214, 0.5];0.5为透明度}),text: new Text({ // 文本样式className: 'map-font',font: '14px Microsoft YaHei',fill: new Fill({color: 'black',}),}),});if (param === '2311') {//对图层里的参数进行判断style.getStroke().setColor('#cccccc');style.getFill().setColor('#cccccc');}style.getText().setText(param);//可在图层上显示文本return style;};const styleFunction = (feature) => getStyles(feature.values_.modelId);//传入feature的参数

map添加vectorlayer

const vectorLayer = new VectorLayer({source: vectorSource,style: styleFunction,title: '',type: 'room',});

可以直接将vectorlayer在初始化时就塞进map里，也可以调用map的addLayer()方法

 this.map.addLayer(vectorLayer)

map添加选中交互事件，并添加选中后的样式

 // 选中之后的样式const selectSingleClick = new Select({style: new Style({stroke: new Stroke({color: '#2d9fd8',width: 0,}),fill: new Fill({color: [0, 11, 214, 0.5],}),}),});//map添加选中事件this.map.addInteraction(selectSingleClick);// 点击图层之后的处理selectSingleClick.on('select', (e) => {const features = e.target.getFeatures().getArray();if (features.length > 0) {const feature = features[0];//获取当前图层//const type = feature.getGeometry().getType();const property = feature.getProperties();//获取当前图层里的参数//const coordinate = getCenter(feature.getGeometry().getExtent());alert(property.modelId);//弹出框展示feature里properties里的modelId}});

效果展示

（因为不能泄露地图，所以就自己随便画了个丑丑的，将就看-><-)

可以看到只覆盖了两个图层，数字也是覆盖上去的
下面看点击之后的效果

选中后的图层显示为选中设置的样式，之前覆盖的字体没了，所以如果在选中之后也要显示字体的要在Select里重新添加文本

可以进https://github.com/Daizymis/Demo/tree/master/aap/src/components/roommap参考完整源码

vue+openlayer实现选房平面图相关推荐

使用vue+腾讯地图API GL实现地图选房的功能
使用vue+腾讯地图API GL实现地图选房的功能背景介绍公司最近想做一个地图选房的功能,在网上找了很久也没有找到这方面的demo,就只好硬着头皮自己写一个地图选房的功能腾讯地图的官方文档.首先 ...
[昆仑叶哲华]房产的基本术语解读选房不愁
[昆仑叶哲华]房产的基本术语解读选房不愁公房公房也称公有住房,国有住宅.它是指由国家以及国有企业.事业单位投资兴建.销售的住宅,在住宅未出售之前,住宅的产权(拥有权.占有权.处分权.收益权)归国家 ...
Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积
场景 Vue+Openlayer使用Draw实现交互式绘制线段: Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上实 ...
程序员的选房神技，GitHub上的房源爬虫
买房,在中国是任何一个年轻人都绕不开都话题.特别是在当下限购摇号等多重政策打压的情况,要选到一个自己心仪的房子可谓难度不小. 而且,伴随着房价上涨的还有房租.买不起房的,想要租个合适的小窝也不容易啊! ...
租房有深坑？手把手教你如何用R速读评论+科学选房
图片来源:网络编译 Hope.臻臻.CoolBoy 文章来源大数据文摘出品如有转载,请联系原作者. 最近,租房这事儿成了北漂族的一大bug,要想租到称心如意的房子,不仅要眼明手快,还得看清各类& ...
小森林顺序_这篇微推价值过亿！仁恒公园世纪二期选房顺序“摇号”，1:7！
昨日,仁恒公园世纪公布了此次参与摇号的线上登记客户名单,除去审核未通过的无效客户,有效客户共计1413组.此次采取乒乓球公证摇号,按线上登记公示客户名单(叠墅/洋房/高层)对应的同号乒乓球分别投进乒乓 ...
开发商微信选房后不退认筹金_新楼盘开盘的“认筹”和“认购”,劝您看懂后再去认！...
各大开发商,包括运城在内的,他们在新楼盘开盘时都会出现"认筹"."认购"字样,可是,您具体清楚是什么意思吗?建议您了解清楚以后再决定认不认-- 认筹: 认筹是开 ...
有运气摇号来不及挑选？网易有数帮你科学选房
本文来自网易云社区作者: 汪谦今年3月28日之后,杭州开始实行摇号买房,买房得凭运气.倘若侥幸摇中,选房也需要好好做一番功课.一般,摇中的购房者将根据摇到的选房顺序依次现场选房,每人只有1分钟的选 ...
vue openlayer 添加风场效果
vue openlayer 添加风场效果一个简单的小demo,就是在一个openlayers地图上面添加风场效果. 话不多说,直接进入正题. 首先我们需要安装一个插件. 插件地址:https://w ...

vue+openlayer实现选房平面图