概述

今天呢，我们说说如何在OL3+的版本中实现链家的地图找房功能。

准备工作

1.功能分析

看看链家的地图找房功能，其实比较简单，主要包涵：
1）基于行政区划的统计展示；
2）分级别展示，逐级钻取。

2.数据获取

首先，打开链家地图找房连接，按下F12进入调试，切换到“网络”选项卡，选择“js”，在过滤中输入关键字“callback=J”，这个时候逐个点一下，就能看到我们想要的数据了，如下图：

说明：
1、通过抓取到的数据，验证了我刚开始的功能分析；
2、想获取更多，可逐级点看看看，在本demo中只取了两级。

效果

实现

1.展示数据

    function addZoneStatic(result) {var _features = [];for(var code in result){var _result = result[code];var _coord = ol.proj.fromLonLat([_result.longitude, _result.latitude]);var _geom = new ol.geom.Point(_coord);var _feature = new ol.Feature({geometry: _geom,attr: _result});_features.push(_feature);}source.addFeatures(_features);}

2.鼠标经过高亮

    var select = new ol.interaction.Select({condition: ol.events.condition.pointerMove,layers:[vector],style: selectStyle});map.addInteraction(select);

3.向下钻取

    map.on("click", function (e) {select.setActive(false);if(map.hasFeatureAtPixel(e.pixel)){source.clear();var _feature = map.getFeaturesAtPixel(e.pixel)[0];var _attr = _feature.get("attr");var _border = dealBorder(_attr.border);var _bGeom = new ol.geom.Polygon([_border]);_bGeom.transform("EPSG:4326", "EPSG:3857");var _extent = _bGeom.getExtent();map.getView().fit(_extent, map.getSize());$.get("data/haidian.json", function (result) {addZoneStatic(result);select.setActive(true);});}});

4.核心代码——设置样式

    function getStyle(feature, isselect) {var styles = [];var _attr = feature.get("attr");var _price = (_attr.unit_price/10000).toFixed(1)+"万",_count = _attr.count.toString(),_name = _attr.name,_lon = _attr.longitude,_lat = _attr.latitude;var _coord = ol.proj.fromLonLat([_lon, _lat]);var _geom = new ol.geom.Point(_coord);var _color = isselect?"rgba(200, 0, 0, .75)":"rgba(0, 200, 0, .75)";var _font = "normal 12px 微软雅黑",_offset = 17;styles.push(new ol.style.Style({image: new ol.style.Circle({radius: 45,fill: new ol.style.Fill({color: _color})}),text: new ol.style.Text({text: _price,textAlign:"center",textBaseline:"middle",offsetY:"0",font: _font,fill: new ol.style.Fill({color: '#fff'})})}));styles.push(new ol.style.Style({geometry: _geom,text: new ol.style.Text({text: _name,textAlign: "center",textBaseline: "middle",font: _font,offsetY: -_offset,fill: new ol.style.Fill({color: '#fff'})})}));styles.push(new ol.style.Style({geometry: _geom,text: new ol.style.Text({text: _count,textAlign:"center",textBaseline:"middle",font: _font,offsetY: _offset,fill: new ol.style.Fill({color: '#fff'})})}));return styles;}//选中样式function selectStyle(feature) {var _attr = feature.get("attr"),_styles = getStyle(feature, true);var _border = dealBorder(_attr.border);var _bGeom = new ol.geom.Polygon([_border]);_bGeom.transform("EPSG:4326", "EPSG:3857");_styles.push(new ol.style.Style({geometry: _bGeom,stroke: new ol.style.Stroke({color: "rgba(200, 0, 0, .75)",width: 2}),fill: new ol.style.Fill({color: "rgba(200, 0, 0, .1)"})}));return _styles;}

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	niujp08@qq.com
webgis群	452117357
Android群	337469080
GIS数据可视化群	458292378

“GIS讲堂”知识星球开通了，在星球，我将提供一对一的问答服务，你问我答，期待与你相见。

OL3+中链家地图找房功能实现相关推荐

仿链家地图找房_全网稀缺，完整链家地图找房的实现(一)
前一段时间我应公司的需求开发了类似链家地图找房的功能,然而我发现现在市面上,对于链家地图找房功能的完整实现相关的文章还是比较稀缺的,亦或是功能还不够完善,出于这个方面,我觉得把自己对于链家地图找房功能 ...
仿链家地图找房的简单实现 1
本篇目录: 使用入门简单使用流程链家地图找房效果区域点位气泡数据结构实现 addOverlay方法区域边界获取区域点位经纬度获取区域边界小结最近由于项目需要,开始调研如何使用百度地 ...
仿链家地图找房_我在深圳的第一个家是在有着6000套房的工业区里
https://www.zhihu.com/video/1098548661679751168 张佳荣 / 互联网公司员工临近毕业,我决定要留在深圳找房那天,晴空万里 Ⅰ 初见集悦城大 ...
vue百度地图三级缩放，实现地图找房功能，vue-baidu-map
文章目录前言一.安装vue-baidu-map 二.使用步骤(只记录使用方法) 1.实现效果 2.实现功能总结前言使用vue-baidu-map实现三级地图缩放实现地图找房功能,在第三级使用 ...
Java开发导入腾讯地图描点_腾讯地图点聚合开发-实现地图找房功能
链家实现的效果分析链家的地图找房主要分为三层.第一层为市区层,比如南山.罗湖等:第二层为片区,比如南头.科技园等:第三层则为小区. 因为第一层,第二层的数据没有那么多,这两个接口都是把所有的数据一 ...
腾讯地图实现地图找房功能
链家实现的效果最近接到一个需求,需要使用鹅厂地图实现类似链家网的地图找房功能,然后我去网上看了一下,基本上使用的都是百度地图.于是我打算自己稍微封装一下,可以在使用的时候更加的方便. 01. 分析 ...
百度地图——地图找房功能
代码地址:https://github.com/huiyan-fe/BMapGLLib HouseSearchService层 package cn.itcast.baidumap. ...
小程序实现地图找房功能
思路解析:使用小程序的 map 地图组件 ,markers 标记点数据集合用来生产地图上的标记,用callout 或者label 实现气泡,本文使用的是callout ,最后如何实现点击气泡更新下方 ...
腾讯地图点聚合应用之地图找房
链家实现的效果分析地图找房功能使用点聚合来实现的.官网示例如下:https://lbs.qq.com/javascript_v2/sample/overlay-markercluster.html ...
用vue仿贝壳地图找房功
用vue仿贝壳地图找房功能主要实现: 通过baidu-map 实现鼠标滚动缩放地图级别,同时控制行政区划气泡的展示和隐藏: 放大地图,行政区划气泡消失,同时展示改行政区划下面的房源信息,我这里展示的是 ...

OL3+中链家地图找房功能实现

概述