整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Excel一键创建32个省份命名的空白工作表的操作

在领导想要一个具有32个省份的空白工作簿,该如何快速创建呢,难道让小编一个表一个表的建立,一个表一个表的命名

(方方格子插件)

1.先看动图演示吧

2.我们可以从网上下载好省份明细,在A列整理好

3.然后呢我们选择方方格子插件按钮

4.然后选择工作表操作

5.选择创建工作表的操作命令

6.弹出对话框将内容拷贝去掉

7.确定后即可完成批量创建

如果经验帮到了你,请记得分享!

之前分享了mapboxgl 互联网地图纠偏插件,插件当时只集成了高德地图。

文章发布后,有小伙伴在后台留言,希望插件也能支持百度地图。

刚好国庆假期有时间就研究了一下。

插件加载瓦片原理

首先,插件之所以能够正确的加载互联网地图瓦片,关键是依托经纬度和瓦片编号的互转算法。

有了经纬度和瓦片编号的互转算法,插件就能根据当前地图窗口4个角的经纬度坐标,算出需要请求的瓦片编号。

再根据瓦片编号转经纬度的算法,算出请求到的每一个瓦片在地图上摆放的经纬度位置。

这样瓦片就能正确的显示在地图上了。

然后再监听地图范围的改变,当范围改变时,重复上述步骤,更新地图瓦片。

瓦片编码方式

经纬度和瓦片编号的互转算法,在不同地图中是不一样的,这取决于不同地图的瓦片编码方式。

瓦片编码方式总结下来,可以分为4大类:谷歌XYZ、TMS、QuadTree、百度XYZ。

我们之前集成的高德地图瓦片,采用的就是谷歌xyz编码方式,这种编码方式,瓦片的坐标原点在世界地图的左上角,西经180 º北纬85 º左右,瓦片编号规则如下图所示:

谷歌xyz编码方式的经纬度和瓦片编号互转算法是公开的,详见:Slippy map tilenames,插件之前就是用的这个。

百度地图采用的是自己的百度XYZ方式,瓦片坐标的原点在本初子午线和赤道的交汇处,瓦片编号规则如下图所示:

网上有人研究了这4类瓦片编码方式的,经纬度坐标与瓦片编号互转算法,并在github上分享了源码。

我们把百度的那部分互转算法拿来,加入到我们的纠偏插件中,这样纠偏插件就能支持百度地图了。

纠偏后效果如下:

插件升级

插件这次升级,除了新增百度地图以外,顺带把平时常用的天地图、OSM和GEOQ也加了进来。

天地图是大地2000坐标系,可以在wgs84坐标地图上直接使用,误差很小。OSM地图直接是wgs84坐标,不需要纠偏。

所以它两个在插件中直接使用 mapboxgl 的原生接口,其它地图则使用我们写的自定义图层接口。

GeoQ地图瓦片的编码方式和高德相同,改个瓦片请求地址就可以。

把它们都收集到一起,看效果,真是爽歪歪

最后,在 mapboxgl 中还是推荐使用矢量瓦片,展示效果会好很多,上面的栅格瓦片推荐作为补充使用。

目前网上还没有免费的矢量瓦片地图资源,这个问题可以通过本地发布OSM地图矢量瓦片的方式解决。

本地发布OSM地图矢量瓦片的方式可以参考之前写的文章 OSM地图本地发布-环境搭建、OSM地图本地发布-如何生成各省市矢量地图

插件地址

mapboxgl互联网地图纠偏插件

在线示例:http://gisarmory.xyz/blog/index.html?demo=mapboxglMapCorrection4

代码地址:http://gisarmory.xyz/blog/index.html?source=mapboxglMapCorrection3

总结

  1. 之前分享的mapboxgl互联网地图纠偏插件只集成了高德地图,有小伙伴留言希望支持百度地图。
  2. 插件加载互联网地图瓦片的原理是基于经纬度和瓦片编号的互转算法。
  3. 因为不同地图使用的瓦片编码规则不同,所以不同地图的经纬度和瓦片编号的互转算法也会不同。
  4. 网上有人分享了不同地图中,经纬度和瓦片编号的互转算法,我们把百度地图的互转算法拿来使用,这样插件就能支持百度地图瓦片的纠偏了。
  5. 本次插件升级除了增加百度地图外,还增加了天地图、OSM地图和GeoQ地图。

参考资料

瓦片地图原理:

https://segmentfault.com/a/1190000011276788

国内主要地图瓦片坐标系定义及计算原理:

https://cntchen.github.io/2016/05/09/国内主要地图瓦片坐标系定义及计算原理/

Slippy map tilenames:

https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames


原文地址:http://gisarmory.xyz/blog/index.html?blog=mapboxglMapCorrection4

关注《GIS兵器库》, 只给你网上搜不到的GIS知识技能。

本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名《GIS兵器库》(包含链接: http://gisarmory.xyz/blog/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。



.效果图1



2.准备

2.1 浏览器,简单,绝大多数浏览器都支持

2.2 下载echarts库js文件

官网上下载:

https://www.echartsjs.com/zh/index.html

2.3 有3个js库文件下载好放在同一个目录下,如下导入:

    <script src="jquery.min.js"></script>

    <script src="echarts.js"></script>

    <script src="china.js"></script>


3.用txt复制如下代码,当然也可以直接复制到代码编辑器中,我用的是微软vsc

4.取个名字,建议先后缀为js,然后复制一个,再取名为html,这是本地操作

图2



5.代码:(js和html的代码)

<!DOCTYPE html>
<html>
<head>
    <!--代码声明,否则容易乱码-->
    <meta charset="utf-8"> 
    <title>全国各省市支援湖北武汉抗击新冠疫情图</title>
	<!-- .centerItem(展示图片的画布大小、边缘设置) -->
    <style>
        .centerItem {width:800px;height:500px;background-color: #003077;margin:10px auto 0 auto;}
    </style>
</head>
 
<body>
    <!--设置div容器,定义id名字,类=画布=centerItem-->
    <div id="mapBox" class="centerItem"></div>
    <!-- 引入相关js文件或库,这个是有点难,尤其是从官网上复制相关代码时,未指定js文件或库或插件-->
    <script src="jquery.min.js"></script>
    <script src="echarts.js"></script>
    <script src="china.js"></script>
    <script>
		// 新版已经不要求加script type="text/javascript"放在里面了
        // 基于准备好的dom,初始化echarts实例
        var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
		// 以下可以从官网上复制相关代码---
        var chinaGeoCoordMap = {
			// 这些地理坐标可以网上查找,也可以放在json中,然后引用
			'黑龙江': [127.9688, 45.368],
			'内蒙古': [110.3467, 41.4899],
			"吉林": [125.8154, 44.2584],
			'北京市': [116.4551, 40.2539],
			"辽宁": [123.1238, 42.1216],
			"河北": [114.4995, 38.1006],
			"天津": [117.4219, 39.4189],
			"山西": [112.3352, 37.9413],
			"陕西": [109.1162, 34.2004],
			"甘肃": [103.5901, 36.3043],
			"宁夏": [106.3586, 38.1775],
			"青海": [101.4038, 36.8207],
			"新疆": [87.9236, 43.5883],
			"西藏": [91.11, 29.97],
			"四川": [103.9526, 30.7617],
			"重庆": [108.384366, 30.439702],
			"山东": [117.1582, 36.8701],
			"河南": [113.4668, 34.6234],
			"江苏": [118.8062, 31.9208],
			"安徽": [117.29, 32.0581],
			"湖北": [114.3896, 30.6628],
			"浙江": [119.5313, 29.8773],
			"福建": [119.4543, 25.9222],
			"江西": [116.0046, 28.6633],
			"湖南": [113.0823, 28.2568],
			"贵州": [106.6992, 26.7682],
			"云南": [102.9199, 25.4663],
			"广东": [113.12244, 23.009505],
			"广西": [108.479, 23.1152],
			"海南": [110.3893, 19.8516],
			'上海': [121.4648, 31.2891],
			'舟山': [122.207216, 29.985295],
			'昆明': [102.9199, 25.4663],
			'香港': [114.1, 22.2],
			'澳门': [113.33, 22.13], 
			'北京': [116.4551, 40.2539],
			'台湾': [121.30, 25.03],
		};
		// 我把格式整理一下,感觉js代码格式看着很多括号占一行,很难受
		var chinaDatas = [
			[{name: '黑龙江',value: 0}],	
			[{name: '内蒙古',value: 0}],	
			[{name: '吉林',value: 0}],	
			[{name: '辽宁',value: 0}],	
			[{name: '河北',value: 0}],	
			[{name: '天津',value: 0}],	
			[{name: '山西',value: 0}],	
			[{name: '陕西',value: 0}],	
			[{name: '甘肃',value: 0}],	
			[{name: '宁夏',value: 0}],	
			[{name: '青海',value: 0}],	
			[{name: '新疆',value: 0}],
			[{name: '西藏',value: 0}],	
			[{name: '四川',value: 0}],	
			[{name: '重庆',value: 0}],	
			[{name: '山东',value: 0}],	
			[{name: '河南',value: 0}],	
			[{name: '江苏',value: 0}],
			[{name: '安徽',value: 0}],	
			[{name: '湖北',value: 0}],	
			[{name: '浙江',value: 0}],	
			[{name: '福建',value: 0}],	
			[{name: '江西',value: 0}],	
			[{name: '湖南',value: 0}],	
			[{name: '贵州',value: 0}],
			[{name: '广西',value: 0}],	
			[{name: '海南',value: 0}],	
			[{name: '上海',value: 0}],	
			[{name: '昆明',value: 0}],	
			[{name: '广东',value: 0}],	
			[{name: '香港',value: 0}],	
			[{name: '澳门',value: 0}],	
			[{name: '北京',value: 0}],
			[{name: '台湾',value: 0}],
			// 我是舟山人,当然支援湖北武汉要用红色,与众不同些
			[{name: '舟山',value: 1}],
		];

	var convertData = function(data) 
	   {
		var res = [];
		for(var i = 0; i < data.length; i++) 
		   {
			var dataItem = data[i];
			var fromCoord = chinaGeoCoordMap[dataItem[0].name];
			// 设置湖北坐标点为终止点tocoord
			var toCoord = [114.3896, 30.6628];
			if(fromCoord && toCoord) 
			{res.push([{coord: fromCoord,value: dataItem[0].value}, {coord: toCoord}])}
		    }
		return res;
	    };

	var series = [];
	[['湖北', chinaDatas]].forEach(function(item, i) 
	{
	    console.log(item)
		series.push(
			{type: 'lines',zlevel: 2,effect: {show: true,
											  period: 4, //箭头指向速度,值越小速度越快
											  trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
											  symbol: 'arrow', //箭头图标
											  symbolSize: 5, //图标大小
											  },
			lineStyle: {normal: {
						width: 1,     //尾迹线条宽度
						opacity: 1,    //尾迹线条透明度
						curveness: .3   //尾迹线条曲直度
						        }
						},
			data: convertData(item[1])
			}, 
			
			{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,
			 rippleEffect: { //涟漪特效
							period: 4, //动画时间,值越小速度越快
							brushType: 'stroke', //波纹绘制方式 stroke, fill
							scale: 4 //波纹圆环最大限制,值越大波纹越大
							},
			 label: {normal: {show: true,position: 'right', //显示位置
							  offset: [5, 0], //偏移设置
							  formatter: function(params){return params.data.name}, //圆环显示文字
							  fontSize: 13
							  },
					emphasis: {show: true}
					},
			 symbol: 'circle',symbolSize: function(val) {return 5+ val[2] * 5},  //圆环大小
			 itemStyle: {normal: {show: false,color: '#f00'}},

			 // item[1]代表舟山到湖北是红色单独的,注意上面舟山的values值
			 data: item[1].map(function(dataItem) 
						{return {
								name: dataItem[0].name,
								value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
								};
						}
			                    ), //这个小括号是map后面的一对,括号太多,看的头晕,还是python好
			 }, //type后面的大括号
			 
			//被支援点的设置:湖北武汉
			{type: 'scatter',coordinateSystem: 'geo',zlevel: 2,
			 rippleEffect: {period: 4,brushType: 'stroke',scale: 4},
			 label: {normal: {show: true,position: 'right',color: '#0f0',formatter: '{b}',
							  textStyle: {color: "#0f0"}
					          },
					emphasis: {show: true,color: "#f60"}
				    },
			 symbol: 'pin',symbolSize: 50,
			 data: [{name: item[0],value: chinaGeoCoordMap[item[0]].concat([10]),
				    }],
			} //type后面的大括号
		); // push后面的小括号是一对
	} //和湖北下面的大括号是一对
	); // 是forEach(function的小括号是一对,看晕了
    
	// 有时间前面加var,再空一格,注意单复数,与后面setOption括号里保持一致
	option = {
		tooltip: 
		{
			trigger: 'item',backgroundColor: 'rgba(166, 200, 76, 0.82)',borderColor: '#FFFFCC',
			showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,
			extraCssText: 'z-index:100',
			formatter: function(params, ticket, callback) 
			    {
				//根据业务自己拓展要显示的内容
				var res = "";
				var name = params.name;
				var value = params.value[params.seriesIndex + 1];
				res = "<span style='color:#fff;'>" + name + "</span><br/>数据:" + value;
				return res;
			    }
		},
		backgroundColor:"#013954",
		//图例值控制
	    visualMap: { min: 0,max: 1,calculable: true,show: true,
					color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
					textStyle: {color: '#fff'}
		           },
		geo: {map: 'china',zoom: 1.2,label: {emphasis: {show: false}},
			  roam: true, //是否允许缩放
			  itemStyle: {normal: {
									color: 'rgba(51, 69, 89, .5)', //地图背景色
									borderColor: '#516a89', //省市边界线00fcff 516a89
									borderWidth: 1
				                    },
				         emphasis: {color: 'rgba(37, 43, 61, .5)' } //悬浮背景
			             }
		     },
		series: series
	}; // 是option的后面的大括号是一对

        // 使用制定的配置项和数据显示图表
        mapBoxEchart.setOption(option);
        // echart图表自适应
        window.addEventListener("resize", function() {mapBoxEchart.resize()});
</script>

</body>
</html>

6.说明一下:这不是python,代码繁琐,括号太多,注释还不一样。

6.1 注意小括号(),大括号{}对应

6.2 注释说明:

html中注释采用:

<!--xxx-->

在js代码中:

即<script>......</script>中,

采用://,这个和python的#一样,是单行注释。


7.祝福:

武汉加油、湖北加油、中国加油!

武汉必胜、湖北必胜、中国必胜!