在上一步得到了所有期待项目的地理坐标之后，可以把数据体现在地图上给领导看了。首先需要一张符合自己审美风格的底图来给领导留下强烈的印象；因为我对百度地图的初始配色非常不满，所以这个对我来说是刚需，恰好又需要用echarts出地图，所以就刚好一起做了。
# echarts
# 这里是把地图装在dlg_map.js文件里再再html中调用
# 以下为dly_map.js中的内容
function loadOneColumn(dataJson) {
var colors = [
'#5793f3', '#d14a61', '#675bba', '#FF8C44', '#a1ec97',
'#7EABF3', '#D16C7D', '#7C73BA', '#FF9A5B', '#a8e4a0',
'#9BBDF3', '#D18592', '#8C85BA', '#FFB384', '#aedba8',
'#B1CBF3', '#D198A2', '#9892BA', '#FFC6A3', '#b2d4ae',
'#bfcde3', '#c99fa6', '#9b96b4', '#F3E1D6', '#b5cfb2'
]; // 我自己常用的配色表
var myChart_map01 = echarts.init(document.getElementById('map01'));
myChart_map01.setOption({
title: {
// show: false,
text: '热点项目地图（月）',
x: 'center',
textStyle: {
color: '#666666',
},
}, // 标题
tooltip : {
trigger: 'item',
formatter: '{b}{a}',
}, // 显示
toolbox: {
// show: false,
orient: 'vertical',
x: 'left',
y: 'center',
feature: {
restore: {show: true},
saveAsImage: {show: true}
}
}, // 工具箱
legend: {
backgroundColor:'white',
x: 'left',
y: 'top',
data: ['浏览','到访','成交','成交流出'],
selected:{
'到访':false,
'成交':false
}
}, // 我在echarts地图上需要展示的维度
bmap: { // 定制地图bmap
center: [114.0667, 22.6590],
zoom: 12,
roam: true,
mapStyle:{
// 以下为调整百度地图展示方式的部分
styleJson: [
{
'featureType': 'land', //调整土地颜色
'elementType': 'geometry',
'stylers': {
'color': '#f3f3f3'
}
},
{
'featureType': 'building', //调整建筑物颜色
'elementType': 'geometry',
'stylers': {
'color': '#04406F',
'visibility': 'off'
}
},
{
'featureType': 'building', //调整建筑物标签是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway', //调整高速道路颜色
'elementType': 'geometry',
'stylers': {
'color': '#fdfdfd'
}
},
{
'featureType': 'highway', //调整高速名字是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial', //调整一些干道颜色
'elementType': 'geometry',
'stylers': {
'color':'#fefefe'
}
},
{
'featureType': 'arterial', // 干道标签不显示
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green', //绿地
'elementType': 'geometry',
'stylers': {
'color': '#E6E6E6'
}
},
{
'featureType': 'water', //水体
'elementType': 'geometry',
'stylers': {
'color': '#d1d1d1'
}
},
{
'featureType': 'subway', //地铁
'elementType': 'geometry.stroke',
'stylers': {
'color': '#fdfdfd'
}
},
{
'featureType': 'subway', //地铁标签不显示
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway', //铁路不显示
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway', //铁路标签不显示
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'all', //调整所有的标签的边缘颜色
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#313131',
'visibility': 'off'
}
},
{
'featureType': 'all', //调整所有标签的填充颜色，选择不显示
'elementType': 'labels.text.fill',
'stylers': {
'color': '#FFFFFF',
'visibility': 'off'
}
},
{
'featureType': 'manmade', //人工造物？ = =
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'manmade',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
// 'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'labels',
'stylers': {
// 'visibility': 'off'
}
},
{
'featureType': 'subway', //地铁色差，调亮一点契合我的白色主题
'elementType': 'geometry',
'stylers': {
'lightness': 85
}
},
{
'featureType': 'railway', //铁路色差
'elementType': 'all',
'stylers': {
'lightness': 60
}
},
{
'featureType': 'boundary', //边界色差
'elementType': 'geometry',
'stylers': {
'color': '#8b8787',
'weight': '1',
'lightness': 40
}
}
]
}
},
series: [
{
name: '浏览',
coordinateSystem: 'bmap',
type: 'scatter',
z: 0,
large: true,
// large: true,
// rippleEffect: {
// brushType: 'fill',
// scale: 2
// },
hoverAnimation: true,
itemStyle: {
normal: {
color: colors[14],
opacity: 0.6,
shadowBlur: 6,
shadowColor: '#666666'
}
},
label: {
normal: {
formatter: function(val){
return val.value[2];
},
position: 'inside',
show: false
},
emphasis: {
show: true,
color: "#1b1b1b"
}
},
symbolSize: function (val) {
return Math.sqrt(50*(val[2])/3.14);
// return Math.sqrt(10*(val[2])/3.14); //用于帮助运营出特定年度成交数据的修正显示图
},
data: []
},
{
name: '到访',
coordinateSystem: 'bmap',
type: 'scatter',
z: 0,
large: true,
hoverAnimation: true,
itemStyle: {
normal: {
color: colors[10],
opacity: 0.6,
shadowBlur: 6,
shadowColor: '#666666'
}
},
label: {
normal: {
formatter: function(val){
return val.value[2];
},
position: 'inside',
show: false
},
emphasis: {
show: true,
color: "#1b1b1b"
}
},
symbolSize: function (val) {
return Math.sqrt(50*(val[2])/3.14);
},
data: [],
},
{
name: '成交',
coordinateSystem: 'bmap',
type: 'scatter',
z: 1,
large: true,
hoverAnimation: true,
itemStyle: {
normal: {
color: colors[11],
opacity: 0.6,
shadowBlur: 6,
shadowColor: '#666666'
}
},
label: {
normal: {
formatter: function(val){
return val.value[2];
},
position: 'inside',
show: false
},
emphasis: {
show: true,
color: "#ffffff"
}
},
symbolSize: function (val) {
return Math.sqrt(50*(val[2])/3.14);
},
data: [],
},
{
name: '成交流出',
coordinateSystem: 'bmap',
type: 'lines',
z: 1,
symbol: ['circle', 'emptyCircle'],
symbolSize: [2, 10],
label: {
normal: {
show: false,
formatter: '{a}: {c}'
},
emphasis: {
show: true,
color: colors[0],
shadowBlur: 5,
shadowColor: '#ffffff'
}
},
lineStyle: {
normal: {
width: 2,
opacity: 0.6,
curveness: 0.1,
color: colors[6],
}
},
data: []
}
]
});
var bmap = myChart_map01.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
// 从另一个js文件中调用数据的部分，此处略过不表
myChart_map01.showLoading();
var map_rd = [];
var map_vs = [];
var map_dl = [];
var map_dl_flw = [];
$.each(dataJson.list, function (index, item) {
map_rd.push(item.map_rd);
map_vs.push(item.map_vs);
map_dl.push(item.map_dl);
map_dl_flw.push(item.map_dl_flw);
});
myChart_map01.hideLoading();
myChart_map01.setOption({
series: [
{
name: '浏览',
data: map_rd
},
{
name: '到访',
data: map_vs
},
{
name: '成交',
data: map_dl
},
{
name: '成交流出',
data: map_dl_flw
}
]
});
};
$(function(){})
然后是调用上面这个dlg_map.js文件的html
# html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=">
<title>数据分析</title>
<style type="text/css">
... // ccs略过不表
</style>
<script src="js/echarts.min.js"></script>
<script src="js/bmap.min.js"></script>
<script src="js/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<section>
<article>
<div id="map01" style="width:95%;height:680px;"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=##########"></script> // 指定百度地图调用地址和ak
<script src="js/dlg_map.js"></script> // 调用上面写好的js
<script type="text/javascript" src="js/log_map.js"></script> // 调用另一个js中写好的data
</article>
</section>
</body>
</html>
最后是这样一张图
然而其实我只是需要这个浅白风格的底图用来放在python里调用：
把我们在库里存好的全深圳的项目信息，包含项目名、项目所属片区、项目经纬度的数据准备好，按片区分色显示在地图上：
# python3 jupyternotebook
###### initial setup
import numpy as np
import pandas as pd
import pymongo
import time
import re
import os
os.chdir("C:/Users/sss/OneDrive/daily_Script/Script_Python/") # 项目路径
CHAPTER_ID = "requests_re_lctn_baiduAPI" # 项目名称
###### initial setup for plotting
import matplotlib
import matplotlib.pyplot as plt
import matplotlib.image as mpimg
%matplotlib inline
plt.rcParams['axes.labelsize'] = 12
plt.rcParams['xtick.labelsize'] = 12
plt.rcParams['ytick.labelsize'] = 12
PROJECT_ROOT_DIR = "."
IMAGES_PATH = os.path.join(PROJECT_ROOT_DIR, "doc_images", CHAPTER_ID) # Where to save the figures
def save_fig(fig_id, tight_layout=True, fig_extension="png", resolution=300):
path = os.path.join(IMAGES_PATH, fig_id + "." + fig_extension)
print("Saving figure", fig_id)
if tight_layout:
plt.tight_layout()
plt.savefig(path, format=fig_extension, dpi=resolution)
def plt_map(dtf_input, tg_size, tg_colr, fig_output, tg_alpha=0.3, tg_size_scale=6):
sz_img=mpimg.imread(PROJECT_ROOT_DIR+"\\doc_images\\"+CHAPTER_ID+"\\img_sz.png")
ax = dtf_input.plot(kind="scatter", x="lng", y="lat", figsize=(15,10),
s = dtf_input[tg_size]*tg_size_scale, label = tg_size,
c = tg_colr, cmap = plt.get_cmap("jet"),
alpha = tg_alpha, colorbar = False,
)
plt.imshow(sz_img, extent=[113.80,114.5, 22.45, 22.80], alpha=0.6, cmap=plt.get_cmap("jet"))
plt.xlabel("Longitude", fontsize=10)
plt.ylabel("Latitude", fontsize=10)
prices = dtf_input[tg_colr]
tick_values = np.linspace(prices.min(), prices.max(), 11)
cbar = plt.colorbar()
cbar.ax.set_yticklabels(["(%.d)prcnt"%(v*100) for v in tick_values], fontsize=14)
cbar.set_label(tg_colr, fontsize=16)
plt.legend(fontsize=10)
save_fig(fig_output)
plt.show()
plt_map(dtf_xhbn_img, 'cnt_show', '所属片区', 'pic_map')
# 在数据框dtf_xhbn_img中 包含'lng','lat','cnt_show','所属片区'四列
# 用'cnt_show'变量决定大小, '所属片区'决定颜色，保存图片名'pic_map'
# 画图在地址为为'./doc_images/requests_re_lctn_baiduAPI/img_sz.png'的底图上
# 图片保存在同文件夹内
# python脚本底板来自<Hands-on ML with Sklearn & TF>
最终效果：
可以看见链家的片区分类确实是不错的····
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
