370 lines
13 KiB
HTML
370 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>上海市街道</title>
|
|
<script src="lib/echarts490rc/echarts490rc.min.js"></script>
|
|
<!-- <script src="lib/echarts/echarts.min.js"></script>-->
|
|
<!-- <script src="echarts.min.js"></script>-->
|
|
</head>
|
|
<body>
|
|
<div id="main" style="width: 100%; height:95vh;"></div>
|
|
<!--<div id="main" style="width: 100%; height:700%;"></div>-->
|
|
</body>
|
|
</html>
|
|
|
|
|
|
<script>
|
|
|
|
// 定义分数区间和对应颜色
|
|
var scoreIntervals = [
|
|
{min: -1, max: 24, color: '#93c5fd'},
|
|
{min: 24, max: 50, color: '#60a5fa'},
|
|
{min: 50, max: 75, color: '#3b82f6'},
|
|
{min: 75, max: 100, color: '#2563eb'}
|
|
];
|
|
|
|
// 定义颜色映射
|
|
const colorMap = {
|
|
'七宝镇': 38,
|
|
'万祥镇': 90,
|
|
'三星镇': 77,
|
|
'三林镇': 97,
|
|
'堡镇': 97,
|
|
'庙镇': 97,
|
|
'上实现代农业园区': 11,
|
|
'上海市奉贤区海湾旅游区': 41,
|
|
'上海海港综合经济开发区': 48,
|
|
'上钢新村街道': 60,
|
|
'东平林场': 50,
|
|
'东平镇': 2,
|
|
'东明路街道': 74,
|
|
'中兴镇': 75,
|
|
'中山街道': 96,
|
|
'临汾路街道': 13,
|
|
'九亭镇': 5,
|
|
'书院镇': 68,
|
|
'五角场街道': 16,
|
|
'五角场镇': 39,
|
|
'五里桥街道': 61,
|
|
'亭林镇': 17,
|
|
'仙霞新村街道': 66,
|
|
'真如镇': 66,
|
|
'佘山镇': 42,
|
|
'共和新路街道': 9,
|
|
'凉城新村街道': 67,
|
|
'凌云路街道': 88,
|
|
'前卫农场': 89,
|
|
'北新泾街道': 70,
|
|
'北站街道': 45,
|
|
'北蔡镇': 29,
|
|
'半淞园路街道': 63,
|
|
'华亭镇': 21,
|
|
'华新镇': 17,
|
|
'华泾镇': 58,
|
|
'华漕镇': 15,
|
|
'华阳路街道': 97,
|
|
'南京东路街道': 79,
|
|
'南京西路街道': 80,
|
|
'南桥镇': 53,
|
|
'南汇新城镇': 67,
|
|
'南码头路街道': 23,
|
|
'南翔镇': 96,
|
|
'友谊路街道': 53,
|
|
'古美街道': 5,
|
|
'叶榭镇': 93,
|
|
'合庆镇': 49,
|
|
'向化镇': 64,
|
|
'吕巷镇': 18,
|
|
'吴泾镇': 19,
|
|
'吴淞街道': 33,
|
|
'周家桥街道': 87,
|
|
'周家渡街道': 38,
|
|
'周浦镇': 73,
|
|
'嘉兴路街道': 20,
|
|
'嘉定工业区': 18,
|
|
'嘉定镇街道': 57,
|
|
'四团镇': 44,
|
|
'四川北路街道': 1,
|
|
'四平路街道': 91,
|
|
'城桥镇': 26,
|
|
'塘桥街道': 54,
|
|
'夏阳街道': 83,
|
|
'外冈镇': 45,
|
|
'外滩街道': 61,
|
|
'外高桥保税区': 49,
|
|
'大团镇': 33,
|
|
'大场镇': 56,
|
|
'大宁路街道': 49,
|
|
'大桥街道': 90,
|
|
'天山路街道': 37,
|
|
'天平路街道': 73,
|
|
'天目西路街道': 37,
|
|
'奉城镇': 69,
|
|
'奉浦社区': 96,
|
|
'安亭镇': 24,
|
|
'定海路街道': 22,
|
|
'宜川路街道': 32,
|
|
'宝山城市工业园区': 49,
|
|
'宝山路街道': 33,
|
|
'宣桥镇': 31,
|
|
'小东门街道': 25,
|
|
'小昆山镇': 57,
|
|
'山阳镇': 59,
|
|
'岳阳街道': 97,
|
|
'川沙新镇': 78,
|
|
'平凉路街道': 69,
|
|
'广中路街道': 58,
|
|
'庄行镇': 30,
|
|
'庙行镇': 95,
|
|
'康健新村街道': 94,
|
|
'康桥镇': 88,
|
|
'廊下镇': 55,
|
|
'延吉新村街道': 54,
|
|
'建设镇': 92,
|
|
'张堰镇': 48,
|
|
'张庙街道': 47,
|
|
'张江镇': 7,
|
|
'张江高科技园区': 60,
|
|
'彭浦新村街道': 3,
|
|
'彭浦镇': 5,
|
|
'徐家汇街道': 62,
|
|
'徐泾镇': 34,
|
|
'徐行镇': 70,
|
|
'惠南镇': 94,
|
|
'打浦桥街道': 23,
|
|
'控江路街道': 87,
|
|
'提篮桥街道': 52,
|
|
'斜土路街道': 44,
|
|
'新华路街道': 19,
|
|
'新场镇': 77,
|
|
'新成路街道': 18,
|
|
'新村乡': 96,
|
|
'新桥镇': 20,
|
|
'新江湾城街道': 63,
|
|
'新河镇': 33,
|
|
'新泾镇': 69,
|
|
'新浜镇': 87,
|
|
'新海镇': 92,
|
|
'新虹街道': 32,
|
|
'方松街道': 76,
|
|
'曲阳路街道': 93,
|
|
'曹家渡街道': 4,
|
|
'曹杨新村街道': 29,
|
|
'曹路镇': 48,
|
|
'月浦镇': 82,
|
|
'朱家角镇': 67,
|
|
'朱泾镇': 35,
|
|
'杨行镇': 22,
|
|
'松江工业区': 74,
|
|
'枫林路街道': 57,
|
|
'枫泾镇': 20,
|
|
'柘林镇': 72,
|
|
'桃浦镇': 29,
|
|
'梅陇镇': 93,
|
|
'横沙乡': 13,
|
|
'欧阳路街道': 34,
|
|
'殷行街道': 53,
|
|
'永丰街道': 30,
|
|
'江宁路街道': 25,
|
|
'江川路街道': 68,
|
|
'江桥镇': 79,
|
|
'江浦路街道': 65,
|
|
'江湾镇街道': 85,
|
|
'江苏路街道': 52,
|
|
'沪东新村街道': 90,
|
|
'泖港镇': 3,
|
|
'泗泾镇': 85,
|
|
'泥城镇': 40,
|
|
'洋泾街道': 86,
|
|
'洞泾镇': 8,
|
|
'浦兴路街道': 18,
|
|
'浦江镇': 47,
|
|
'海湾镇': 92,
|
|
'淞南镇': 80,
|
|
'淮海中路街道': 49,
|
|
'港沿镇': 54,
|
|
'港西镇': 98,
|
|
'湖南路街道': 92,
|
|
'漕河泾新兴技术开发区': 11,
|
|
'漕河泾街道': 91,
|
|
'漕泾镇': 96,
|
|
'潍坊新村街道': 78,
|
|
'瑞金二路街道': 85,
|
|
'甘泉路街道': 42,
|
|
'田林街道': 96,
|
|
'白鹤镇': 85,
|
|
'盈浦街道': 74,
|
|
'真新街道': 31,
|
|
'石化街道': 56,
|
|
'石泉路街道': 3,
|
|
'石湖荡镇': 31,
|
|
'石门二路街道': 88,
|
|
'祝桥镇': 61,
|
|
'程家桥街道': 16,
|
|
'竖新镇': 98,
|
|
'练塘镇': 84,
|
|
'绿华镇': 77,
|
|
'罗店镇': 48,
|
|
'罗泾镇': 10,
|
|
'老港镇': 5,
|
|
'老西门街道': 79,
|
|
'航头镇': 32,
|
|
'花木街道': 54,
|
|
'芷江西路街道': 15,
|
|
'莘庄工业区': 90,
|
|
'莘庄镇': 92,
|
|
'菊园新区': 91,
|
|
'虹桥街道': 93,
|
|
'虹桥镇': 24,
|
|
'虹梅路街道': 9,
|
|
'豫园街道': 97,
|
|
'赵巷镇': 69,
|
|
'重固镇': 7,
|
|
'金山卫镇': 34,
|
|
'金山工业区': 64,
|
|
'金杨新村街道': 57,
|
|
'金桥经济技术开发区': 17,
|
|
'金桥镇': 84,
|
|
'金汇镇': 8,
|
|
'金泽镇': 47,
|
|
'金海社区': 16,
|
|
'长兴镇': 15,
|
|
'长寿路街道': 16,
|
|
'长征镇': 89,
|
|
'长桥街道': 76,
|
|
'长白新村街道': 30,
|
|
'长风新村街道': 38,
|
|
'陆家嘴街道': 53,
|
|
'陈家镇': 49,
|
|
'青村镇': 39,
|
|
'静安寺街道': 43,
|
|
'顾村镇': 4,
|
|
'颛桥镇': 21,
|
|
'香花桥街道': 89,
|
|
'马桥镇': 26,
|
|
'马陆镇': 66,
|
|
'高东镇': 88,
|
|
'高境镇': 12,
|
|
'高桥镇': 72,
|
|
'车墩镇': 72,
|
|
'高行镇': 76,
|
|
'唐镇': 76,
|
|
'龙华街道': 49
|
|
};
|
|
|
|
// 如果需要一次性生成整个对象，可以使用以下方法
|
|
const allAreas = [
|
|
"外滩街道", "豫园街道", "五里桥街道", "半淞园路街道", "打浦桥街道",
|
|
"瑞金二路街道", "南京东路街道", "淮海中路街道", "小东门街道",
|
|
"老西门街道", "漕河泾街道", "田林街道", "长桥街道", "虹梅路街道",
|
|
"华泾镇", "枫林路街道", "湖南路街道", "天平路街道", "斜土路街道",
|
|
"徐家汇街道", "康健新村街道", "龙华街道", "漕河泾新兴技术开发区",
|
|
"凌云路街道", "华阳路街道", "新华路街道", "北新泾街道", "江苏路街道",
|
|
"程家桥街道", "周家桥街道", "新泾镇", "虹桥街道", "天山路街道",
|
|
"仙霞新村街道", "彭浦镇", "共和新路街道", "北站街道", "静安寺街道",
|
|
"大宁路街道", "石门二路街道", "天目西路街道", "临汾路街道", "芷江西路街道",
|
|
"南京西路街道", "宝山路街道", "江宁路街道", "曹家渡街道", "彭浦新村街道",
|
|
"宜川路街道", "桃浦镇", "长征镇", "长寿路街道", "甘泉路街道",
|
|
"石泉路街道", "曹杨新村街道", "长风新村街道", "四川北路街道", "广中路街道",
|
|
"江湾镇街道", "提篮桥街道", "凉城新村街道", "嘉兴路街道", "曲阳路街道",
|
|
"欧阳路街道", "殷行街道", "五角场镇", "平凉路街道", "五角场街道",
|
|
"定海路街道", "四平路街道", "大桥街道", "新江湾城街道", "江浦路街道",
|
|
"长白新村街道", "控江路街道", "延吉新村街道", "梅陇镇", "七宝镇",
|
|
"颛桥镇", "莘庄镇", "华漕镇", "吴泾镇", "浦江镇", "马桥镇", "莘庄工业区",
|
|
"虹桥镇", "江川路街道", "新虹街道", "古美街道", "庙行镇", "高境镇", "吴淞街道",
|
|
"张庙街道", "大场镇", "月浦镇", "宝山城市工业园区", "淞南镇", "友谊路街道",
|
|
"杨行镇", "顾村镇", "罗泾镇", "罗店镇", "真新街道", "菊园新区", "嘉定工业区",
|
|
"嘉定镇街道", "新成路街道", "徐行镇", "江桥镇", "马陆镇", "华亭镇", "南翔镇",
|
|
"外冈镇", "安亭镇", "大团镇", "潍坊新村街道", "洋泾街道", "浦兴路街道",
|
|
"万祥镇", "书院镇", "北蔡镇", "张江镇", "新场镇", "曹路镇", "泥城镇", "老港镇",
|
|
"金桥镇", "东明路街道", "塘桥街道", "上钢新村街道", "金杨新村街道",
|
|
"南汇新城镇", "周家渡街道", "高东镇", "合庆镇", "外高桥保税区", "沪东新村街道",
|
|
"金桥经济技术开发区", "三林镇", "周浦镇", "陆家嘴街道", "花木街道", "康桥镇",
|
|
"航头镇", "高桥镇", "高行镇", "张江高科技园区", "惠南镇", "祝桥镇", "宣桥镇",
|
|
"川沙新镇", "南码头路街道", "亭林镇", "金山卫镇", "金山工业区", "枫泾镇",
|
|
"山阳镇", "朱泾镇", "廊下镇", "张堰镇", "漕泾镇", "石化街道", "吕巷镇",
|
|
"九亭镇", "佘山镇", "新桥镇", "石湖荡镇", "松江工业区", "新浜镇", "泖港镇",
|
|
"泗泾镇", "洞泾镇", "永丰街道", "小昆山镇", "岳阳街道", "中山街道", "方松街道",
|
|
"叶榭镇", "练塘镇", "夏阳街道", "盈浦街道", "香花桥街道", "徐泾镇", "白鹤镇",
|
|
"赵巷镇", "重固镇", "金泽镇", "朱家角镇", "华新镇", "南桥镇", "金海社区",
|
|
"上海市奉贤区海湾旅游区", "庄行镇", "柘林镇", "青村镇", "上海海港综合经济开发区",
|
|
"奉浦社区", "海湾镇", "金汇镇", "四团镇", "奉城镇", "绿华镇", "新河镇", "三星镇",
|
|
"竖新镇", "新海镇", "中兴镇", "城桥镇", "前卫农场", "陈家镇", "东平林场",
|
|
"港西镇", "新村乡", "港沿镇", "向化镇", "上实现代农业园区", "建设镇", "东平镇",
|
|
"长兴镇", "横沙乡"
|
|
];
|
|
|
|
|
|
// 根据分数获取颜色
|
|
function getColorByScore(score) {
|
|
for (let range of scoreIntervals) {
|
|
if (score >= range.min && score <= range.max) {
|
|
return range.color;
|
|
}
|
|
}
|
|
return '#FFFFFF'; // 默认颜色
|
|
}
|
|
|
|
|
|
// fetch('test2.geojson')
|
|
fetch('json/shanghaiJiedao.geojson')
|
|
// fetch('H:\\develop\\dama\\java\\buliangfanying\\src\\main\\resources\\public\\json\\shanghaiJiedao.geojson')
|
|
.then(response => response.json())
|
|
.then(geojsonData => {
|
|
// 注册地图
|
|
echarts.registerMap('JiedaoMap', geojsonData);
|
|
|
|
const completeColorMap = allAreas.reduce((acc, area) => {
|
|
acc[area] = Math.floor(Math.random() * 100) + 1;
|
|
return acc;
|
|
}, {});
|
|
|
|
console.log(completeColorMap);
|
|
|
|
// 初始化 ECharts 实例
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
// 准备数据
|
|
let data = Object.keys(colorMap).map(key => ({
|
|
name: key,
|
|
value: colorMap[key]
|
|
}));
|
|
|
|
// 配置项
|
|
var option = {
|
|
visualMap: {
|
|
pieces: scoreIntervals.map(interval => ({
|
|
gte: interval.min,
|
|
lte: interval.max,
|
|
color: interval.color
|
|
})),
|
|
show: false // 不显示视觉映射控件
|
|
},
|
|
series: [
|
|
{
|
|
type: 'map',
|
|
mapType: 'JiedaoMap', // 使用注册的地图名称
|
|
roam: true,
|
|
label: {
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: 10, // 设置字体大小
|
|
color: '#1e1e1e' // 设置字体颜色
|
|
}
|
|
},
|
|
itemStyle: {
|
|
areaColor: '#eee',
|
|
borderColor: '#444'
|
|
},
|
|
data: data
|
|
}
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
});
|
|
</script>
|