北京充电桩数据的获取与展示

概述：

本文讲述如何通过高德的搜索接口获取北京市的充电桩的数据，并实现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);
			        });
				});
	   }

---------------------------------------------------------------------------------------------------------------

技术博客

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)