概述:
本文讲述如何通过高德的搜索接口获取北京市的充电桩的数据,并实现WEBGIS的展示。
效果:
获取网络数据并保存
获取的数据
转换为Geojson
地图展示
查看充电桩信息
实现:
1、获取数据并保存
通过接口“http://ditu.amap.com/service/poiInfo?query_type=TQUERY&pagesize=20&pagenum=1&zoom=8&city=110000&keywords=充电桩”获取数据。
package com.lzugis.url;
import com.amazonaws.util.json.JSONArray;
import com.amazonaws.util.json.JSONObject;
import com.lzugis.CommonMethod;
public class GetChargingPile {
public static void main(String[] args) {
// TODO Auto-generated method stub
CommonMethod cm = new CommonMethod();
String file = "d://chargingpile.txt";
int pageSize = 20, total = 894;
int pageNum = total%50==0?(int)total/pageSize:(int)total/pageSize+1;
try{
cm.append2File(file, "districtname,districtcode,latitude,longitude,name,address,picinfo");
System.out.println("totalnum="+pageNum);
for(int i=0;i<pageNum;i++){
String url = "http://ditu.amap.com/service/poiInfo?query_type=TQUERY&pagesize="+pageSize+"&pagenum="+(i+1)
+"&zoom=8&city=110000&keywords=%E5%85%85%E7%94%B5%E6%A1%A9";
System.out.println("pagenum="+(i+1));
JSONObject json = cm.getUrl2JSON(url);
JSONArray arry = (JSONArray)((JSONObject)json.get("data")).get("poi_list");
for(int j=0;j<arry.length();j++){
JSONObject _chargPile = (JSONObject)arry.get(j);
StringBuffer sb = new StringBuffer();
//"districtname,latitude,longitude,name,address,pic_info"
sb.append(_chargPile.get("districtname").toString()).append(",")
.append(_chargPile.get("districtcode").toString()).append(",")
.append(_chargPile.get("latitude").toString()).append(",")
.append(_chargPile.get("longitude").toString()).append(",")
.append(_chargPile.get("name").toString()).append(",")
.append(_chargPile.get("address").toString()).append(",")
.append(_chargPile.get("pic_info").toString());
cm.append2File(file, sb.toString());
}
}
System.out.println(file);
}
catch(Exception e){
e.printStackTrace();
}
}
}
2、格式转换为geojson
# -*- coding: utf-8 -*-
import sys
from osgeo import gdal
from osgeo import ogr
#读取shap文件
def shp2json():
#为了支持中文路径,请添加下面这句代码
gdal.SetConfigOption("GDAL_FILENAME_IS_UTF8","NO")
#为了使属性表字段支持中文,请添加下面这句
gdal.SetConfigOption("SHAPE_ENCODING","")
#注册所有的驱动
ogr.RegisterAll()
#数据格式的驱动
driver = ogr.GetDriverByName('ESRI Shapefile')
ds = driver.Open(r'D:\\data\\gdal\\chargingpile.shp');
if ds is None:
print "打开文件失败!"
sys.exit(1)
dv = ogr.GetDriverByName("GeoJSON")
if dv is None:
print "打开驱动失败!"
sys.exit(1)
dv.CopyDataSource(ds, r"D:\\data\\gdal\\chargingpile.geojson")
ds.Destroy()
print "转换成功!"
def main():
shp2json();
if __name__ == "__main__":
main();
3、页面展示
$.get("../data/chargingpile.geojson",null,function(result){
result = eval("("+result+")");
var features = (new ol.format.GeoJSON()).readFeatures(result);
for(var i=0;i<features.length;i++){
var _feature = features[i];
var _geom = features[i].getGeometry();
_geom.transform('EPSG:4326', 'EPSG:3857');
_feature.setGeometry(_geom);
}
var vectorSource = new ol.source.Vector({
features: features
});
var vector = new ol.layer.Vector({
source: vectorSource,
style:function(feature,r){
var color = "rgba(0,255,255,0.5)",
radius = 6;
//if(id==543)color = "rgba(255,0,0,1)",radius = 10;
return new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
fill: new ol.style.Fill({
color: color
})
})
})
}
});
var map = new ol.Map({
target: 'map',
layers: [baidu_layer, province, vector],
view: new ol.View({
center: ol.proj.transform([104.214, 35.847], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
var select = new ol.interaction.Select({
condition: ol.events.condition.click
});
map.addInteraction(select);
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var title = document.getElementById('popup-title');
var closer = document.getElementById('popup-closer');
closer.onclick = function(){
container.style.display = 'none';
closer.blur();
return false;
};
var overlay = new ol.Overlay({
element: container
});
map.addOverlay(overlay);
select.on('select', function(e) {
var feature = e.target.getFeatures().item(0);
var coordinate = feature.getGeometry().getCoordinates();
overlay.setPosition(coordinate);
//districtname,districtcode,latitude,longitude,name,address,picinfo
$(content).html("").append($("<div/>").append("<b>所属区域:</b>"+feature.get("districtna")+"<br/><br/>")
.append("<b>区域编码:</b>"+feature.get("districtco")+"<br/><br/>")
.append("<b>位置:</b>("+feature.get("longitude")+", "+feature.get("latitude")+")<br/><br/>")
.append("<b>地址:</b>"+feature.get("address")))
.append($("<img />").attr("src",feature.get("picinfo")));
container.style.display = 'block';
title.innerHTML = feature.get("name");
title.style.display = 'block';
map.getView().setCenter(coordinate);
});
});
}