整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在領導想要一個具有32個省份的空白工作簿，該如何快速創建呢，難道讓小編一個表一個表的建立，一個表一個表的命名
（方方格子插件）
1.先看動圖演示吧
2.我們可以從網上下載好省份明細，在A列整理好
3.然后呢我們選擇方方格子插件按鈕
4.然后選擇工作表操作
5.選擇創建工作表的操作命令
6.彈出對話框將內容拷貝去掉
7.確定后即可完成批量創建
如果經驗幫到了你，請記得分享！
之前分享了mapboxgl 互聯網地圖糾偏插件，插件當時只集成了高德地圖。
文章發布后，有小伙伴在后臺留言，希望插件也能支持百度地圖。
剛好國慶假期有時間就研究了一下。
首先，插件之所以能夠正確的加載互聯網地圖瓦片，關鍵是依托經緯度和瓦片編號的互轉算法。
有了經緯度和瓦片編號的互轉算法，插件就能根據當前地圖窗口4個角的經緯度坐標，算出需要請求的瓦片編號。
再根據瓦片編號轉經緯度的算法，算出請求到的每一個瓦片在地圖上擺放的經緯度位置。
這樣瓦片就能正確的顯示在地圖上了。
然后再監聽地圖范圍的改變，當范圍改變時，重復上述步驟，更新地圖瓦片。
經緯度和瓦片編號的互轉算法，在不同地圖中是不一樣的，這取決于不同地圖的瓦片編碼方式。
瓦片編碼方式總結下來，可以分為4大類：谷歌XYZ、TMS、QuadTree、百度XYZ。
我們之前集成的高德地圖瓦片，采用的就是谷歌xyz編碼方式，這種編碼方式，瓦片的坐標原點在世界地圖的左上角，西經180 o北緯85 o左右，瓦片編號規則如下圖所示：
谷歌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小時內與您取得聯系。
