首页 > 代码库 > Arcgis4js实现链家找房的效果
Arcgis4js实现链家找房的效果
概述
买房的各位亲们不知是否留意过链家的"地图找房"，这样的功能对于使用者来说，是非常方便的，大家可通过连接（https://bj.lianjia.com/ditu/）查看具体效果。鉴于此，本文结合该效果与功能，介绍在Arcgis4js中如何实现类似的效果。
功能效果
1、数据的聚合展示
2、地图高亮
3、聚合数据的钻取
4、列表展示
编码实现
1、数据的聚合展示
链家的实现是基于距离的一个聚合展示，在本实例中做了简化，聚合是通过后台统计查询实现的，其数据组织格式如下：
之后，在地图上做展示，关键代码如下：
$("#network").on("click",function(){
for(var i=0;i<data.length;i++){
var _d = data[i];
var geometry = getGeomByWKT(_d.wkt);
var pt = geometry.getCentroid();
var sms = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE, 60,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 2),
new Color([255,0,0,0.5]));
var tsname = new TextSymbol(_d.counname).setOffset(0, 6).setColor(new Color([255,255,255])) ;
var tsprice = new TextSymbol(_d.price.toFixed(2)+"万").setOffset(0, -7).setColor(new Color([255,255,255]));
var tscount = new TextSymbol(_d.count+"套").setOffset(0, -22).setColor(new Color([255,255,255]));
var _gd = _d;
_d.index = i;
_gd.id="graphic"+i;
gLayer.add(new Graphic(pt, sms, _gd));
gLayer.add(new Graphic(pt, tsname,_d));
gLayer.add(new Graphic(pt, tsprice,_d));
gLayer.add(new Graphic(pt, tscount,_d));
}
});实现后效果入下：
地图高亮展示是鼠标经过聚合点时高亮展示该区域，代码如下：
gLayer.on("mouse-over",function(e){
map.setMapCursor("pointer");
var sms = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE, 60,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0,0,255]), 2),
new Color([0,0,255,0.5]));
var _zoneG = getGraphicById("graphic"+e.graphic.attributes.index);
_zoneG.setSymbol(sms);
gLayer.redraw();
zLayer.clear();
var geometry = getGeomByWKT(e.graphic.attributes.wkt);
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([0,0,255]), 2),new Color([0,0,255,0.25])
);
var gfx = new Graphic(geometry,sfs);
zLayer.add(gfx);
});
gLayer.on("mouse-out",function(e){
map.setMapCursor("default");
var sms = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE, 60,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 2),
new Color([255,0,0,0.5]));
var _zoneG = getGraphicById("graphic"+e.graphic.attributes.index);
_zoneG.setSymbol(sms);
gLayer.redraw();
zLayer.clear();
})实现后效果入下：
3、聚合数据的钻取与列表展示
点击聚合数据点，钻取数据，数据分别以地图和列表两种方式进行展示，关键代码如下：
function addZoneData(attr){
var geometry = getGeomByWKT(attr.wkt);
var extent = geometry.getExtent();
map.setExtent(extent);
var data = http://www.mamicode.com/getZoneData(extent);>实现效果如下：
上述实现完整代码如下：<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href=http://www.mamicode.com/"http://jsapi.thinkgis.cn/esri/css/esri.css">>
---------------------------------------------------------------------------------------------------------------
技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式
q q:1004740957
e-mail:niujp08@qq.com
公众号:lzugis15
Q Q 群:452117357(webgis)
337469080(Android)
Arcgis4js实现链家找房的效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。