引用地图加上地图点击事件

最新推荐文章于 2024-09-09 14:08:32 发布
最新推荐文章于 2024-09-09 14:08:32 发布
阅读量906 收藏 1
点赞数
分类专栏： echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luxuriant_tree/article/details/83182286
版权
本文介绍了一个使用ECharts实现的吉林省及其下属各市、县地理数据的可视化项目。通过地图展示了不同区域的数据分布，如人口数量等，并实现了点击交互功能，可以逐级查看更详细的地区数据。项目中详细列出了吉林省所有地区的JSON文件路径，以及用于展示的数据数组。
摘要由CSDN通过智能技术生成

html部分

<div class="menu">
						<span class="name">吉林省</span>
					</div>
					<div id="main" style="width: 100%;height:669px;">

					</div>

js部分

var sheng = "省/吉林省.json"

			var baicheng = "省/吉林省/白城市.json";

			var daan = "省/吉林省/白城市/大安市.json";
			var taobei = "省/吉林省/白城市/洮北区.json";
			var taonan = "省/吉林省/白城市/洮南市.json";
			var tongyu = "省/吉林省/白城市/通榆县.json";
			var zhenlai = "省/吉林省/白城市/镇赉县.json";

			var baishan = "省/吉林省/白山市.json";

			var fusong = "省/吉林省/白山市/抚松县.json";
			var hunjiang = "省/吉林省/白山市/浑江区.json";
			var jiangyuan = "省/吉林省/白山市/江源区.json";
			var jingyu = "省/吉林省/白山市/靖宇县.json";
			var linjiang = "省/吉林省/白山市/临江市.json";
			var cbcx = "省/吉林省/白山市/长白朝鲜族自治县.json";

			var jilin = "省/吉林省/吉林市.json";

			var changyi = "省/吉林省/吉林市/昌邑区.json";
			var chuanying = "省/吉林省/吉林市/船营区.json";
			var fengman = "省/吉林省/吉林市/丰满区.json";
			var huadian = "省/吉林省/吉林市/桦甸市.json";
			var jiaohe = "省/吉林省/吉林市/蛟河市.json";
			var longtan = "省/吉林省/吉林市/龙潭区.json";
			var panshi = "省/吉林省/吉林市/磐石市.json";
			var shulan = "省/吉林省/吉林市/舒兰市.json";
			var yongji = "省/吉林省/吉林市/永吉县.json";

			var liaoyuan = "省/吉林省/辽源市.json";

			var dongfeng = "省/吉林省/辽源市/东丰县.json";
			var dongliao = "省/吉林省/辽源市/东辽县.json";
			var longshan = "省/吉林省/辽源市/龙山区.json";
			var xian = "省/吉林省/辽源市/西安区.json";

			var siping = "省/吉林省/四平市.json";

			var gongzhuling = "省/吉林省/四平市/公主岭市.json";
			var lishu = "省/吉林省/四平市/梨树县.json";
			var shuangliao = "省/吉林省/四平市/双辽市.json";
			var tiedong = "省/吉林省/四平市/铁东区.json";
			var tiexi = "省/吉林省/四平市/铁西区.json";
			var ytm = "省/吉林省/四平市/伊通满族自治县.json";

			var songyuan = "省/吉林省/松原市.json";

			var fuyu = "省/吉林省/松原市/扶余市.json";
			var ningjiang = "省/吉林省/松原市/宁江区.json";
			var qgrlsm = "省/吉林省/松原市/前郭尔罗斯蒙古族自治县.json";
			var qianan = "省/吉林省/松原市/乾安县.json";
			var changling = "省/吉林省/松原市/长岭县.json";

			var tonghuashi = "省/吉林省/通化市.json";

			var dongchang = "省/吉林省/通化市/东昌区.json";
			var erdaojiang = "省/吉林省/通化市/二道江区.json";
			var huinan = "省/吉林省/通化市/辉南县.json";
			var jian = "省/吉林省/通化市/集安市.json";
			var liuhe = "省/吉林省/通化市/柳河县.json";
			var meihekou = "省/吉林省/通化市/梅河口市.json";
			var tonghuaxian = "省/吉林省/通化市/通化县.json";

			var ybcx = "省/吉林省/延边朝鲜族自治州.json";

			var antu = "省/吉林省/延边朝鲜族自治州/安图县.json";
			var dunhua = "省/吉林省/延边朝鲜族自治州/敦化市.json";
			var helong = "省/吉林省/延边朝鲜族自治州/和龙市.json";
			var hunchun = "省/吉林省/延边朝鲜族自治州/珲春市.json";
			var longjing = "省/吉林省/延边朝鲜族自治州/龙井市.json";
			var tumen = "省/吉林省/延边朝鲜族自治州/图们市.json";
			var wangqing = "省/吉林省/延边朝鲜族自治州/汪清县.json";
			var yanji = "省/吉林省/延边朝鲜族自治州/延吉市.json";

			var changchun = "省/吉林省/长春市.json";

			var chaoyang = "省/吉林省/长春市/朝阳区.json";
			var dehui = "省/吉林省/长春市/德惠市.json";
			var erdao = "省/吉林省/长春市/二道区.json";
			var jiutai = "省/吉林省/长春市/九台区.json";
			var kuancheng = "省/吉林省/长春市/宽城区.json";
			var lvyuan = "省/吉林省/长春市/绿园区.json";
			var nanguan = "省/吉林省/长春市/南关区.json";
			var nongan = "省/吉林省/长春市/农安县.json";
			var shuangyang = "省/吉林省/长春市/双阳区.json";
			var yushu = "省/吉林省/长春市/榆树市.json";

			var cityName = {
				"吉林省": sheng,
				"白城市": baicheng,
				"大安市": daan,
				"洮北区": taobei,
				"洮南市": taonan,
				"通榆县": tongyu,
				"镇赉县": zhenlai,
				"白山市": baishan,
				"抚松县": fusong,
				"浑江区": hunjiang,
				"江源区": jiangyuan,
				"靖宇县": jingyu,
				"临江市": linjiang,
				"长白朝鲜族自治县": cbcx,
				"吉林市": jilin,
				"昌邑区": changyi,
				"船营区": chuanying,
				"丰满区": fengman,
				"桦甸市": huadian,
				"蛟河市": jiaohe,
				"龙潭区": longtan,
				"磐石市": panshi,
				"舒兰市": shulan,
				"永吉县": yongji,
				"辽源市": liaoyuan,
				"东丰县": dongfeng,
				"东辽县": dongliao,
				"龙山区": longshan,
				"西安区": xian,
				"四平市": siping,
				"公主岭市": gongzhuling,
				"梨树县": lishu,
				"双辽市": shuangliao,
				"铁东区": tiedong,
				"铁西区": tiexi,
				"伊通满族自治县": ytm,
				"松原市": songyuan,
				"扶余市": fuyu,
				"宁江区": ningjiang,
				"前郭尔罗斯蒙古族自治县": qgrlsm,
				"乾安县": qianan,
				"长岭县": changling,
				"通化市": tonghuashi,
				"东昌区": dongchang,
				"二道江区": erdaojiang,
				"辉南县": huinan,
				"集安市": jian,
				"柳河县": liuhe,
				"梅河口市": meihekou,
				"通化县": tonghuaxian,
				"延边朝鲜族自治州": ybcx,
				"安图县": antu,
				"敦化市": dunhua,
				"和龙市": helong,
				"珲春市": hunchun,
				"龙井市": longjing,
				"图们市": tumen,
				"汪清县": wangqing,
				"延吉市": yanji,
				"长春市": changchun,
				"朝阳区": chaoyang,
				"德惠市": dehui,
				"二道区": erdao,
				"九台区": jiutai,
				"宽城区": kuancheng,
				"绿园区": lvyuan,
				"南关区": nanguan,
				"农安县": nongan,
				"双阳区": shuangyang,
				"榆树市": yushu
			}
			var data01 = [{
					name: '白城市',
					value: 10000
				},
				{
					name: '松原市',
					value: 1000
				},
				{
					name: '长春市',
					value: 6000
				},
				{
					name: '四平市',
					value: 200
				},
				{
					name: '吉林市',
					value: 50000
				},
				{
					name: '辽源市',
					value: 8000
				},
				{
					name: '通化市',
					value: 10
				},
				{
					name: '白山市',
					value: 10000
				},
				{
					name: '延边朝鲜族自治州',
					value: 700
				},
			];
			var data21 = [{
					name: '大安市',
					value: 10000
				},
				{
					name: '洮北区',
					value: 1000
				},
				{
					name: '洮南市',
					value: 6000
				},
				{
					name: '通榆县',
					value: 200
				},
				{
					name: '镇赉县',
					value: 50000
				},
			];
			var data22 = [{
					name: '长岭县',
					value: 10000
				},
				{
					name: '扶余市',
					value: 1000
				},
				{
					name: '宁江区',
					value: 6000
				},
				{
					name: '前郭尔罗斯蒙古族自治县',
					value: 200
				},
				{
					name: '乾安县',
					value: 2000
				},

			];
			var data23 = [{
					name: '朝阳区',
					value: 10000
				},
				{
					name: '德惠市',
					value: 1000
				},
				{
					name: '二道区',
					value: 6000
				},
				{
					name: '九台区',
					value: 200
				},
				{
					name: '宽城区',
					value: 2000
				},
				{
					name: '绿园区',
					value: 10000
				},
				{
					name: '南关区',
					value: 1000
				},
				{
					name: '农安县',
					value: 6000
				},
				{
					name: '双阳区',
					value: 200
				},
				{
					name: '榆树市',
					value: 2000
				},
			];
			cityCount = {
				"吉林省": data01,
				"白城市": data21,
				"大安市": data01,
				"洮北区": data01,
				"洮南市": data01,
				"通榆县": data01,
				"镇赉县": data01,
				"白山市": data01,
				"抚松县": data01,
				"浑江区": data01,
				"江源区": data01,
				"靖宇县": data01,
				"临江市": data01,
				"长白朝鲜族自治县": data01,
				"吉林市": data01,
				"昌邑区": data01,
				"船营区": data01,
				"丰满区": data01,
				"桦甸市": data01,
				"蛟河市": data01,
				"龙潭区": data01,
				"磐石市": data01,
				"舒兰市": data01,
				"永吉县": data01,
				"辽源市": data01,
				"东丰县": data01,
				"东辽县": data01,
				"龙山区": data01,
				"西安区": data01,
				"四平市": data01,
				"公主岭市": data01,
				"梨树县": data01,
				"双辽市": data01,
				"铁东区": data01,
				"铁西区": data01,
				"伊通满族自治县": data01,
				"松原市": data22,
				"扶余市": data01,
				"宁江区": data01,
				"前郭尔罗斯蒙古族自治县": data01,
				"乾安县": data01,
				"长岭县": data01,
				"通化市": data01,
				"东昌区": data01,
				"二道江区": data01,
				"辉南县": data01,
				"集安市": data01,
				"柳河县": data01,
				"梅河口市": data01,
				"通化县": data01,
				"延边朝鲜族自治州": data01,
				"安图县": data01,
				"敦化市": data01,
				"和龙市": data01,
				"珲春市": data01,
				"龙井市": data01,
				"图们市": data01,
				"汪清县": data01,
				"延吉市": data01,
				"长春市": data23,
				"朝阳区": data01,
				"德惠市": data01,
				"二道区": data01,
				"九台区": data01,
				"宽城区": data01,
				"绿园区": data01,
				"南关区": data01,
				"农安县": data01,
				"双阳区": data01,
				"榆树市": data01
			}

			// 基于准备好的dom，初始化echarts实例
			//  var myChart = echarts.init(document.getElementById('main'));
			//  function areaColor(data){
			var myChart = echarts.init(document.getElementById('main'));
			var option = {
				dataRange: {
					x: 'left',
					y: 'bottom',
					textStyle: {
						color: '#88ceed',
						fontSize: 14 //Y轴 字体大小
					},
					splitList: [{
							start: 10000
						},
						{
							start: 5000,
							end: 10000
						},
						{
							start: 1000,
							end: 5000
						},
						{
							start: 500,
							end: 1000
						},
						{
							start: 100,
							end: 500
						},
						{
							start: 0,
							end: 100
						}
					],
					color: ['#f35000', '#f39800', '#9977e4', '#2ec8ca', '#2063cc', '#284b83']
				},
				series: [{
					type: 'map',
					mapType: name,
					label: {
						normal: {
							show: true
						},
						emphasis: {
							textStyle: {
								color: '#fff',
							}
						}
					},
					itemStyle: {
						normal: {
							color: "#fff",
							borderColor: '#389BB7',
							areaColor: '#fff',
							backgroundColor: "#fff"
						},
						emphasis: {
							areaColor: '#389BB7',
							borderWidth: 0
						}
					},
					animation: true,
					data: data01

				}]
			}
			//  }
			map(cityName['吉林省'], data01);
			//  areaColor(data01);
			function map(url, data) {
				// alert(cityName[name])

				$.get(url, function(geoJson) {

					echarts.registerMap(name, geoJson);
					myChart.setOption(option);

				});
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					dataRange: {
						x: 'left',
						y: 'bottom',
						textStyle: {
							color: '#88ceed',
							fontSize: 14 //Y轴 字体大小
						},
						splitList: [{
								start: 10000
							},
							{
								start: 5000,
								end: 10000
							},
							{
								start: 1000,
								end: 5000
							},
							{
								start: 500,
								end: 1000
							},
							{
								start: 100,
								end: 500
							},
							{
								start: 0,
								end: 100
							}
						],
						color: ['#f35000', '#f39800', '#9977e4', '#2ec8ca', '#2063cc', '#284b83']
					},
					series: [{
						type: 'map',
						mapType: name,
						label: {
							normal: {
								show: true
							},
							emphasis: {
								textStyle: {
									color: '#fff'
								}
							}
						},
						itemStyle: {
							normal: {
								borderColor: '#389BB7',
								areaColor: '#fff',
								label: {
									show: true,
									color: "#000",
									fontSize: 16,
									backgroundColor: "rgba(255,255,255,.3)",
								},
								color: "rgba(255,255,255,.3)"
							},
							emphasis: {
								areaColor: '#389BB7',
								borderWidth: 0
							}
						},
						animation: true,
						data: data

					}]
				}
			}

			// 地图点击
			myChart.on('click', function(e) {
				console.log(e)
				map(cityName[e.name], cityCount[e.name])
				if(e.name != $('.menu span:last-child').text()) {
					$('.menu').append('<span>></span><span class="name">' + e.name + '</span>')
				}
			})

			// 地图导航点击
			$('.menu').on('click', 'span.name', function() {
				var area = $(this).text();
				var ind = $(this).index();
				for(var i = $('.menu span').length - 1; i > ind; i--) {
					$('.menu span').eq(i).remove()
				}
				map(cityName[area], cityCount[area])

			})
在ArcGis中引用天地图提取建筑轮廓
HeroesGreen的博客
01-03 890
详细展示了如何在ArcGis中引用天地图，并在天地图中提取建筑轮廓
Vue3前端项目加载使用腾讯地图
子时不睡的博客
12-19 5268
vue3前端项目加载腾讯地图
echarts 3D地图，地图区域点击触发事件
10-23
echarts 3D地图，地图区域点击触发事件，3d地图加数据
Echarts地图点击事件与点击空白处事件
Beconcentrated的博客
12-27 1810
Echarts地图点击事件与点击空白处事件
【ECharts】饼图中心提示-事件与行为
weixin_41027083的博客
09-09 868
通过echarts的鼠标事件与行为的监听形式来展示数据包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu实现代码鼠标事件的事件参数是事件对象的数据的各个属性，对于图表的点击事件，基本参数如下。
d3.js绘制地图，支持点击等事件
weixin_57182748的博客
11-30 1089
目前项目中遇到的需求是画出一个静态地图，并支持一些基本的点击事件，此次是使用d3.js制作的（d3真的从入门到放弃了），话不多说直接上代码吧，可以直接复制下来就可以用的。一些扩展的功能大家可以自由发挥，d3.js官网（
WebGIS第六课：地图点击事件的引入和点标记
zjjsd195的专栏
04-30 1899
# 1 事件 如何通过点击事件来获取当前位置的经纬度？ 可以通过事件来实现。 先上代码：这里有坑。 // 监听地图点击事件 map.on('click',function(event){ console.log(event) console.log(`经度：${event.lnglat.lng},纬度：${event.lnglat.lat}`) }) 通过绑定click事件实现监听函数，这里注意：在控
openlayers中map事件基础认识与实践详解
whs15193553607的博客
06-30 900
真正的单击事件，会延迟250毫秒以确保不是双击（所以双击时不会触发单击事件）。基本的地图点击事件，地图双击时也会触发2次，地图拖拽时不会触发。地图开始移动时触发，包括通过鼠标拖拽、键盘导航或动画引起的移动。地图移动结束时触发，包括通过鼠标拖拽、键盘导航或动画引起的移动。地图图层组发生变化时触发，如添加、删除或重新排序图层。双击地图事件，同时会触发两次地图单击事件click。地图视图对象（如中心点、缩放级别等）发生变化时触发。鼠标在地图上移动活动时触发该事件。鼠标在地图上拖拽时触发。
百度地图调用实例
06-18
给当前位置加上地表，公交，驾车查询，方便简洁开发
地图上制作线路的动画_使用百度地图API制作线路轨迹播放
weixin_39543835的博客
12-19 5241
1.使用百度地图API制作轨迹播放；可应用于车辆跟踪、行驶线路回放、跑步行程的记录等地图应用场景，1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度、纬度)使用polyline对象依次连接相邻的2个点(注意polyline的个数比point的少1)1.2绘制动态轨迹图(固定间隔时间)每隔500毫秒读取一个轨迹点，实现a,b两个功能a增加一条polylineb将marker从先前的point...
安卓Webview引用谷歌web地图
hhp5127447的专栏
06-04 3745
前段时间由于需求问题需要用到谷歌地图，因为百度地图在国外就是
南京市GeoJson地图，echarts数据绑定，地区点击事件
04-22
南京市GeoJson地图和echarts各区数据绑定，各地区点击事件
地图要素的单击事件--移动gis
qq_40309483的博客
08-22 608
一.添加点击事件 MapViewTouchListener mMapViewTouchListener = new MapViewTouchListener(this, mMapView); mMapView.setOnTouchListener(mMapViewTouchListener); 二 定义MapViewTouchListener类，即地图界面单击事件类 class MapViewTo...
vue+leaflet动态画圆 并且显示geojson数据点，给点绑定点击事件完整代码
候郑青
04-18 949
vue+leaflet动态画圆，显示geojson数据点的集合，点击事件显示提示
在geojson图层上增加点击弹窗，并添加删除功能
qq_26328861的博客
01-29 499
在geojson图层上增加点击弹窗，并添加删除功能
dojo中使用dojo.connect绑定事件，使用dojo.disconnect删除事件
zhousheng193的专栏
03-07 595
项目中有如下需求，如图  选中“行预取”时，下面的input为只读，但是需要提交该input的值，所以不能使用disable，只能使用readOnly，但是使用readOnly的时候，input里还是能出现焦点，需要屏蔽 代码如下图：  其中rowPrefetch为checkbox，rowPrefetchSize为input ps：其中readOnly注意大小写，o一定要大写 ...
for循环内执行ajax出现异步加载问题
Luxuriant_tree的博客
10-19 3517
问题的解决方式是添加$(function(i){}(i)，如下所示: api.ajax({ url: areaListUrl, method: 'post', data: { values: { cid:aid } } }, function(...
vue+openlayer加载geojson通过地图的singleclick事件实现要素的选中高亮以及再次点击取消选中
weixin_43747076的博客
07-01 2052
思考： 选中： 通过singleclick事件可以获取坐标点，openlayer中Feature有个getGeometry().getClosestPoint§方法，就是feature根据这个p坐标可以获取到里这个点最近的坐标点，然后咱们通过这个点和点击的点的距离进行比较，并且咱们也可以进一步的进行限定（判定点击的坐标在feature的边界内），这样做还是有问题，就是你还有可能选中不相关的点或者线，咱们可以做一个工具，也是使用openlayer加载geojson，然后通过选中你想要进行标定的要素，将这些块的
百度地图点击触发事件介绍
热门推荐
qq_42294208的博客
06-18 2万+
 谈一下给标注添加一个事件，事件方法与Map事件机制相同。 监听标注事件监听标注事件是调用marker.addEventListener的方法，现在我们先看到核心类里面的事件。这个事件是marker中的事件，但是marker事件是可以应用于全局的，然后我们在所有的地图上点击，都可以使用这个事件来获取。 然后，我们看到的事件，也就是marker中的事件，从网站的网页中类参考的覆盖物类我们可以知道，当...
这个代码能不能加上一个基于arcgis JavaScript的世界地图
最新发布
09-13
ArcGIS JavaScript API 是 ESRI 开发的一套用于构建交互式地图应用程序的库。使用 ArcGIS JavaScript API，你可以轻松地在网页中嵌入和定制地图。要在现有的代码中加入一个基于 ArcGIS JavaScript 的世界地图，你需要按照以下步骤操作： 1. 引入 ArcGIS JavaScript API：在你的 HTML 文件中，通过 `<script>` 标签引入 ArcGIS JavaScript API 库。你可以在 ESRI 官网找到具体的引用链接。 2. 创建地图容器：在 HTML 中定义一个用于显示地图的元素，通常是一个 `<div>` 标签。 3. 初始化地图对象：使用 ArcGIS JavaScript API 提供的 `Map` 和 `View` 对象来创建地图视图。你可以设置初始的视图范围、缩放级别等。 4. 配置图层：ArcGIS 提供了多种图层，如 `ArcGISTiledLayer`、`ArcGISFeatureLayer` 等，你可以根据需要选择合适的图层类型，并配置相应的服务URL。 5. 展示地图：将地图对象与视图关联，并将其添加到之前创建的地图容器中。 以下是一个简单的示例代码，展示如何在网页中嵌入一个基于 ArcGIS JavaScript 的世界地图： ```html <!DOCTYPE html> <html> <head> <title>世界地图示例</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.24/"></script> <script> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) { var map = new Map({ basemap: "gray-vector" // 使用灰色底图 }); var view = new MapView({ container: "viewDiv", // 对应 HTML 中的 id map: map, zoom: 2, // 缩放级别 center: [0, 0] // 地图中心点经纬度 }); }); </script> </head> <body> <div id="viewDiv" style="width: 100%; height: 100%;"></div> </body> </html> ``` 在上面的代码中，我们创建了一个地图实例和一个视图实例，并将它们关联起来，设置了一个初始的缩放级别和中心点，这样就可以在浏览器中看到一个简单的世界地图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值