在领导想要一个具有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
瓦片地图原理:
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.祝福:
武汉加油、湖北加油、中国加油!
武汉必胜、湖北必胜、中国必胜!
*请认真填写需求信息,我们会在24小时内与您取得联系。