前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >北京充电桩数据的获取与展示

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

作者头像
lzugis
发布2018-10-23 11:22:58
1.8K0
发布2018-10-23 11:22:58
举报

概述:

本文讲述如何通过高德的搜索接口获取北京市的充电桩的数据,并实现WEBGIS的展示。

效果:

获取网络数据并保存

获取的数据

转换为Geojson

地图展示

查看充电桩信息

实现:

1、获取数据并保存

通过接口“http://ditu.amap.com/service/poiInfo?query_type=TQUERY&pagesize=20&pagenum=1&zoom=8&city=110000&keywords=充电桩”获取数据。

代码语言:javascript
复制
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

代码语言:javascript
复制
# -*- 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、页面展示

代码语言:javascript
复制
		    $.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);
			        });
				});
	   }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年06月14日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档