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

概述:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HansBug's Lab

【Ruby on Rails】Model中关于保存之前的原值和修改状态

今天在Rails的Model中遇到了一个问题—— 当我从Model类中获取了一个ActiveRecord对象,对其进行了一系列修改(尚未保存),我该如何确定究竟...

33490
来自专栏雪胖纸的玩蛇日常

第一章 介绍与循环

17930
来自专栏desperate633

深入理解数据库索引原理

转载至 https://tech.meituan.com/mysql-index.html

23010
来自专栏PHP在线

MySQL时间函数,用起来比PHP还爽

前一篇写了PHP的时间函数(还是草稿),这一篇就写Mysql的时间函数吧。最近做的项目,关乎权限,于是自然而然的就与有效期联系在了一起。其 中有一个功能是生成特...

36560
来自专栏WeTest质量开放平台团队的专栏

低于0.01%的极致Crash率是怎么做到的?

48640
来自专栏FreeBuf

基于时延的盲道研究:受限环境下的内容回传信道

在一次漏洞赏金活动中,挖到个命令注入的洞,我先以时延作为证明向厂商提交该漏洞,厂商以国内网络环境差为由(的确得翻墙)拒收,几次沟通,告知若我能取回指定文件 se...

14950
来自专栏图像识别与深度学习

蓝牙项目开发流程

803100
来自专栏技术与生活

设计模式-命令模式

Client:确定具体的命令和接受者; Command:抽象命令接口,一般是接口类或者抽象类 ConcreteCommand:具体的命令执行,调用接受者 Inv...

13950
来自专栏Flutter入门到实战

最全的BAT大厂面试题整理

版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/c70989bd5f29

22220
来自专栏西枫里博客

thinkPHP升级到5.0.13导致update更新出错的问题

话题还得从tinkPHP群消息说起,双十二那天,群内通知官方发布了5.0.13版本。刚好那几天在折腾redis缓存。官方文档中说5.0.13是一个集合诸多改进的...

13350

扫码关注云+社区

领取腾讯云代金券