前端
前端结构
leaflet加载天地图
- 引用leaflet插件
map.js
L.TileLayer.ChinaProvider = L.TileLayer.extend({
initialize: function(type, options) { // (type, Object)
var providers = L.TileLayer.ChinaProvider.providers;
var parts = type.split('.');
var providerName = parts[0];
var mapName = parts[1];
var mapType = parts[2];
var url = providers[providerName][mapName][mapType];
options.subdomains = providers[providerName].Subdomains;
options.key = options.key || providers[providerName].key;
L.TileLayer.prototype.initialize.call(this, url, options);
}
});
L.TileLayer.ChinaProvider.providers = {
TianDiTu: {
Normal: {
Map: "http://t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
Annotion: "http://t{s}.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}"
},
Satellite: {
Map: "http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
Annotion: "http://t{s}.tianditu.com/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}"
},
Terrain: {
Map: "http://t{s}.tianditu.com/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
Annotion: "http://t{s}.tianditu.com/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}"
},
Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
key: "****************"//这里key 要到天地图官网自己申请
},
GaoDe: {
Normal: {
Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
},
Satellite: {
Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
},
Subdomains: ["1", "2", "3", "4"]
},
Google: {
Normal: {
Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
},
Satellite: {
Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
},
Subdomains: []
},
Geoq: {
Normal: {
Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
},
Theme: {
Hydro: "http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}"
},
Subdomains: []
},
OSM: {
Normal: {
Map: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
},
Subdomains: ['a', 'b', 'c']
}
};
L.tileLayer.chinaProvider = function(type, options) {
return new L.TileLayer.ChinaProvider(type, options);
};
index.html
var normalm = L.tileLayer.chinaProvider('Geoq.Normal.Gray',{maxZoom:18,minZoom:5}),
normala = L.tileLayer.chinaProvider('Geoq.Normal.Gray',{maxZoom:18,minZoom:5}),
imgm = L.tileLayer.chinaProvider('Google.Satellite.Map',{maxZoom:18,minZoom:5}),
imga = L.tileLayer.chinaProvider('Google.Satellite.Map',{maxZoom:18,minZoom:5});
//
var normal = L.layerGroup([normalm,normala]),
image = L.layerGroup([imgm,imga]);
var baseLayers = {
"地图":normal,
"影像":image,
}
var overlayLayers = { // 可以叠加其他的图层
}
var map = L.map("map",{
center:[28.184611513671868, 112.96844223632812],
zoom:11,
layers:[normal],
zoomControl:false
});
L.control.layers(baseLayers,overlayLayers).addTo(map);
L.control.zoom({zoomInTitle:'放大', zoomOutTitle:'缩小'}).addTo(map);
L.control.scale().addTo(map);
这样就能加载地图
因为不能爬取房子的经纬度 ,所以选择读取房子的地址 利用高德api的地理编码 将地址转换为经纬度.将房价根据价格 分配不同颜色的marker 用来进行区分。
//读取数据库的内容
function read_gb(){
$.ajax({
tyoe:"get",
url:"http://127.0.0.1:8080/house/searchall",//
success:function(result){
if(result){
var data=eval(result);
for(var i=0;i<data.length;i++){
var address= data[i].houseLatlng;
var price= data[i].housePrice;
tran_latlng(address,data[i])
}
}
}
})
}
//正向地理编码 根据传进来的地址名 转换为经纬度
var markers=[];
function tran_latlng(address,options){
var myGroup=L.layerGroup(markers);
map.addLayer(myGroup);
myGroup.clearLayers(); //批量删除marker
AMap.plugin('AMap.Geocoder', function() {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
city: '430100'
})
var price =options.housePrice;
if(price<1001){
var CustomerIcon = L.Icon.extend({
options: {
iconUrl: './img/marker/red.png',
// shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [32, 40],
shadowSize: [20, 24],
iconAnchor: [17, 12],
shadowAnchor: [4, 62],
}
});
}else if(1000<price&&price<1400){
var CustomerIcon = L.Icon.extend({
options: {
iconUrl: './img/marker/gre.png',
// shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [32, 40],
shadowSize: [50, 64],
iconAnchor: [17, 12],
shadowAnchor: [4, 62],
}
});
}else {
var CustomerIcon = L.Icon.extend({
options: {
iconUrl: './img/marker/blue.png',
// shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [32, 40],
shadowSize: [50, 64],
iconAnchor: [17, 12],
shadowAnchor: [4, 62],
}
});
}
geocoder.getLocation(address, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
// result中对应详细地理坐标信息
// add_marker(result.geocodes[0].location.lng,result.geocodes[0].location.lat);
var marker = L.marker([result.geocodes[0].location.lat,result.geocodes[0].location.lng],{icon:new CustomerIcon()}).addTo(map);
var html='';
html+='<div class="" style="width:200px;height:80px;">';
html+='<div>房源信息:'+options.houseName+'</div>';
html+='<div>租金:'+options.housePrice+'</div>';
html+='<div>房型:'+options.houseLayout+'</div>';
html+='<div>大小:'+options.houseSize+'</div>';
html+='</div>';
marker.bindPopup(html)
markers.push(marker);
marker.on('click', function(e) {
marker.openPopup();
})
}
})
})
}