- 学习：知识的初次邂逅
- 复习：知识的温故知新
- 练习：知识的实践应用
目录
一,特点
- 空间定位精准
- 地理图能够精确地展示地理位置信息，包括国家、城市、山脉、河流等地理要素的空间位置。这使得用户可以清晰地了解数据与地理空间的关联，明确事件或现象发生的具体地点。
- 例如，在展示全球地震分布时，通过地理图可以精准地定位每次地震的震中位置，用户能够直观地看到地震活动频繁的板块边界区域。
- 多维度信息整合
- 可以整合多种地理和非地理数据维度。除了基本的地理位置，还能展示如人口数量、经济指标、气候数据、交通流量等相关信息。这些数据可以通过不同的可视化方式（如颜色、符号、线条等）在地图上进行呈现。
- 以城市地理图为例，不仅可以显示城市的地理位置和边界，还可以通过颜色深浅表示城市的人口密度，用线条粗细展示交通干道的繁忙程度。
- 直观的区域比较
- 方便对不同地理区域进行直接比较。用户可以通过观察地图上不同区域的可视化元素（如颜色、大小、形状等），快速对比各区域在某一或多个数据维度上的差异。
- 比如，在一张世界地图上展示各国的人均 GDP，通过颜色编码，用户可以轻松地比较不同国家之间的经济发展水平差异，识别出高收入和低收入国家的分布区域。
- 视觉吸引力强
- 地理图本身具有很强的视觉吸引力，因为它能够唤起人们对世界地理的认知和兴趣。合理的地理图可视化设计（如 3D 地图、动态地图等）可以进一步增强这种吸引力，使观众更容易投入到数据解读中。
- 例如，一个带有地形起伏效果的 3D 地理图展示旅游景点分布，会比简单的平面地图更能吸引用户的注意力，激发他们对旅游目的地的探索欲望。
二,应用场景
- 城市规划与管理
- 土地利用规划：通过地理图展示城市土地的现有用途（如住宅、商业、工业、绿地等），分析土地利用的合理性和空间分布情况。结合人口增长和经济发展预测，对未来土地利用进行规划，确定合适的土地开发区域和用途转换方向。
- 交通规划与管理：地理图可用于展示城市交通网络，包括道路、地铁、公交等线路的分布和交通流量情况。分析交通拥堵点和瓶颈区域，为交通设施的扩建、新线路的规划以及交通信号的优化提供依据。
- 商业与市场分析
- 市场区域划分：企业可以利用地理图根据消费者的地理位置、购买行为、人口统计学特征等因素划分市场区域。例如，通过分析不同区域的消费者购买频率和金额，将市场划分为高潜力、中潜力和低潜力区域，以便有针对性地开展市场营销活动。
- 店铺选址分析：零售商可以在地理图上叠加人口密度、收入水平、竞争对手分布等数据，评估不同位置开设店铺的可行性和潜在收益。例如，在人口密集且竞争相对较小的区域寻找合适的店铺位置，以提高店铺的市场覆盖率和盈利能力。
- 环境与资源研究
- 生态环境评估：地理图用于展示生态系统的分布（如森林、湿地、草原等），以及环境指标（如空气质量、水质、土壤污染等）的空间变化。评估生态环境的健康状况，监测环境污染的来源和扩散路径，为环境保护和生态修复提供决策支持。
- 自然资源管理：展示自然资源（如矿产资源、水资源、能源资源等）的地理分布和储量情况。分析资源开发利用的现状和趋势，合理规划资源的开采、保护和可持续利用策略。
- 灾害预防与应急响应
- 灾害风险评估：在地理图上结合地理信息（如地形、河流、海岸线等）和灾害历史数据（如地震、洪水、台风等），评估不同区域的灾害风险等级。确定高风险区域，为灾害预防和减灾措施的制定提供依据。
- 应急响应与救援：在灾害发生时，地理图可以作为应急指挥平台，实时展示灾害影响范围、受灾群众分布、救援力量和物资的位置等信息。帮助指挥人员快速制定救援计划，合理调配资源，提高应急响应的效率。
三,代码绘制与效果展示
全国地理图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<title>展示地图</title>
<script src="jquery-3.7.0.min.js"></script>
<script src="../echarts.js"></script>
</head>
<body>
<div id="rootquanguo" style="width: 100%;height: 650px;"></div>
<script>
var mycharquanguo = echarts.init(document.getElementById('rootquanguo'));
// 通过网络请求获得json数据 有网络请求的方式 需要用服务器方式去运行
$.get("./json/china.json", function (ChinaJSON) {
// console.log(ChinaJSON)
//加载地图 注册
echarts.registerMap('china', ChinaJSON); //只有注册之后才能使用
var optionquanguo = {
title: {
text: "中国地图某某数据",
},
grid: {},
tooltip: {
show: true,
triggerOn: "click",//设置点击的时候 弹出提示框
},
legend: {
data: ["地图"],
},
visualMap: [
// { // 第一个 visualMap 组件
// type: 'continuous', // 定义为连续型 visualMap
// orient: "vertical", //设置垂直 还有个属性可以设置水平horizontal 默认就是垂直
// },
{ // 第二个 visualMap 组件
type: 'piecewise', // 定义为分段型 visualMap
pieces:[ //自定义分段样式
{min:0,max:0,color:"#fff"},
{min:100,max:200,color:"#fdfdcf"},
{min:200,max:300,color:"#fe9e83"},
{min:300,max:500,color:"#e55a4e"},
{min:500,max:100000,color:"#4f070d"},
]
}
],
series: {
type: "map", //展示地图的类名
name: "地图", //住了是地图 地图数据对应name
zoom:1.2, //当前图表放大比例
roam:true,//是否开始鼠标放大缩小 和平移
aspectScale:0.75, //宽度和高度的比例 使用率很低
mapType: "china",//加载的地图类型
label: { //时候显示文本 里面可以设置文本的样式大小等属性值
show: true,
fontSize: 8,
},
itemStyle:{
areaColor:"#f1f1f1",
borderColor:"rgba(0,0,0,0.2)", //边框的颜色
},
data: [ //配置数据
{name: "新疆", value: 350},
{name: "重庆", value: 100},
{name: "湖北", value: 20},
{name: "内蒙古", value: 150},
]
},
};
mycharquanguo.setOption(optionquanguo)
})
// //世界地图
// $.get("./json/world.json", function (WorldJSON) {
// // console.log(ChinaJSON)
// //加载地图 注册
// echarts.registerMap('world', WorldJSON); //只有注册之后才能使用
// var option = {
// series: {
// type: "map",
// mapType: "world"
// },
// };
// mychar.setOption(option)
// })
</script>
</body>
</html>省份地区地理图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<title>湖北地区人口密度</title>
<script src="jquery-3.7.0.min.js"></script>
<script src="../echarts.js"></script>
</head>
<body>
<div id="roothubie" style="width: 1000px;height: 400px;"></div>
<script>
var mychartshubei = echarts.init(document.getElementById('roothubie'))
$.get("./json/province/hubei.json", function (hubeiJSON) {
// console.log(hubeiJSON)
//注册
echarts.registerMap('hubei1', hubeiJSON);
var optionhubei = {
title: {
text:"湖北人口密度",
},
visualMap: [ //图例
// { // 第二个 visualMap 组件
// type: 'piecewise', // 定义为分段型 visualMap
// pieces: [ //自定义分段样式
// {min: 0, max: 0, color: "#fff"},
// {min: 0, max: 1000, color: "#fdfdcf"},
// {min: 1000, max: 5000, color: "#fe9e83"},
// {min: 5000, max: 10000, color: "#e55a4e"},
// {min: 10000, max: 9000000, color: "#4f070d"},
// ]
// }
{
type:"continuous", //柱状的图例
min:0,
max:10000,
text: ["高","低"], //图例上下的名称
realtime:true, //显示拖拽的小圈圈
calculable:true,//是否显示拖拽手柄
inRange:{ // 他默认也有一些颜色过渡变化 当然也可以自定义
color:["link","red","yellow"] //图例的颜色分布 从大到小 //当然他默认也有
},
}
],
tooltip:{
trigger:"item", //按照他的分类自动去选择 头
// formatter:'{b}<br>{c}(p/km2)' //b是区域名称 c是合并后的数值
},
series: [{
name:"湖北人口密度",
type: "map",
mapType: "hubei1",
zoom: 1.2,
roam: true,//是否开始鼠标放大缩小 和平移
label: {
show: true,
fontSize: 8,
},
itemStyle: {
areaColor: "#f1f1f1",
borderColor: "rgba(0,0,0,0.2)", //边框的颜色
},
data:[
{name:"随国",value:2000.57},
{name:"武汉市",value:20000.57},
{name:"襄阳市",value:6000.57},
{name:"十堰市",value:900.57},
{name:"孝感市",value:8000.57},
],
nameMap:{//自定义区域映射 比如如果拿到的数据是英文名称 我们可以更换成中文
"随州市":"随国", //可以自定义修改映射到地图的区域名称
},
}]
};
mychartshubei.setOption(optionhubei)
})
</script>
</body>
</html>
- 学习：知识的初次邂逅
- 复习：知识的温故知新
- 练习：知识的实践应用
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
