BIGEMPA Js API示例中心
<html>
<head>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script>
<script type="text/javascript" src="/Public/offline/html2canvas/html2canvas.min.js"></script>
<link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet'/>
<link href="http://www.bigemap.com/Public/css/button.min.css" rel="stylesheet">
<script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
<script type="text/javascript" src="/Public/offline/html2canvas/rgbcolor.js"></script>
<script type="text/javascript" src="/Public/offline/html2canvas/canvg.js"></script>
<script type="text/javascript" src="/Public/offline/html2canvas/umd.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
#area{
position: absolute;
top:50px;
right: 20px;
z-index: 999999999;
}
.my_tooltip{
color: red;
background: transparent;
border: none;
font-size: 18px;
}
.my_tooltip::before{
display: none;
}
</style>
</head>
<body>
<div id='map'></div>
<div id="area">
<button id="create-image" class="button button-tiny button-rounded button-primary ">生成图片</button>
<br/>
<a href="http://www.bigemap.com/Public/offline/html2canvas/html2canvas.zip" target="_blank" class="button button-tiny button-rounded button-primary ">下载插件</a>
</div>
</body>
</html>
<script>
//对应使用到的文件下载地址 http://www.bigemap.com/Public/offline/html2canvas/html2canvas.zip
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
var map = BM.map('map', 'bigemap.zhongkexingtu', {
center: [38, 104],
zoom: 4,
zoomControl: false,
attributionControl: false
});
var nodeList=[];
$('#create-image').on('click',function (){
$('#map').find('svg').each(function (index, node) {
//获取svg的父节点
var parentNode = node.parentNode;
//获取svg的html代码
var svg = node.outerHTML.trim();
//创建一个<canvas>，用于放置转换后的元素
var canvas = document.createElement('canvas');
//将svg元素转换为canvas元素
canvgv2(canvas, svg);
//设置新canvas元素的位置
if (node.style.position) {
canvas.style.position += node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
var trans = getComputedStyle(node).transform.match(/\((.*)\)/);
if (trans && trans[1]) {
trans[1] = trans[1].split(',');
!isNaN(parseInt(trans['1']['4'])) ? canvas.style.left += parseInt(trans['1']['4']) : true;
!isNaN(parseInt(trans['1']['5'])) ? canvas.style.top += parseInt(trans['1']['5']) : true;
}
//删除svg元素
parentNode.removeChild(node);
//增加canvas元素
parentNode.appendChild(canvas);
nodeList.push({
p:parentNode,
a:node,
r:canvas
});
});
html2canvas(document.getElementById('map'), {
backgroundColor:null,
useCORS: true,
allowTaint: true,
}).then(function (canvas){
nodeList.map(v=>{
v.p.removeChild(v.r);
v.p.appendChild(v.a);
});
nodeList.length=0;
var dataUrl = canvas.toDataURL("image/png");
var url = dataUrl;
var a = document.createElement('a');
var event = new MouseEvent('click');
a.download = 'map.png';
a.href = url;
a.dispatchEvent(event);
});
});
$.get('/Public/offline/bounds/100000.geojson',function (data) {
data=JSON.parse(data);
var all=["#f7acbc","#deab8a","#817936","#444693","#ef5b9c","#fedcbd","#7f7522","#2b4490","#feeeed","#f47920","#80752c","#2a5caa","#f05b72","#905a3d","#87843b","#224b8f","#f15b6c","#8f4b2e","#726930","#003a6c","#f8aba6","#87481f","#454926","#102b6a","#f69c9f","#5f3c23","#2e3a1f","#426ab3","#f58f98","#6b473c","#4d4f36","#46485f","#ca8687","#faa755","#b7ba6b","#4e72b8","#f391a9","#fab27b","#b2d235","#181d4b","#bd6758","#f58220","#5c7a29","#1a2933","#d71345","#843900","#bed742","#121a2a","#d64f44","#905d1d","#7fb80e","#0c212b","#d93a49","#8a5d19","#a3cf62","#6a6da9","#b3424a","#8c531b","#769149","#585eaa","#c76968","#826858","#6d8346","#494e8f","#bb505d","#64492b","#78a355","#afb4db","#987165","#ae6642","#abc88b","#9b95c9","#ac6767","#56452d","#74905d","#6950a1","#973c3f","#96582a","#cde6c7","#6f60aa","#b22c46","#705628","#1d953f","#867892","#a7324a","#4a3113","#77ac98","#918597","#aa363d","#412f1f","#007d65","#6f6d85","#ed1941","#845538","#84bf96","#594c6d","#f26522","#8e7437","#45b97c","#694d9f","#d2553d","#69541b","#225a1f","#6f599c","#b4534b","#d5c59f","#367459","#8552a1","#ef4136","#cd9a5b","#007947","#543044","#c63c26","#cd9a5b","#40835e","#63434f","#f3715c","#b36d41","#2b6447","#7d5886","#a7573b","#df9464","#005831","#401c44","#aa2116","#b76f40","#006c54","#472d56","#b64533","#ad8b3d","#375830","#45224a","#b54334","#dea32c","#274d3d","#411445","#853f04","#d1923f","#375830","#4b2f3d","#840228","#c88400","#27342b","#402e4c","#7a1723","#c37e00","#65c294","#c77eb5","#a03939","#c37e00","#73b9a2","#ea66a6","#8a2e3b","#e0861a","#72baa7","#f173ac","#8e453f","#ffce7b","#005344","#fffffb","#8f4b4a","#fcaf17","#122e29","#fffef9","#892f1b","#ba8448","#293047","#f6f5ec","#6b2c25","#896a45","#00ae9d","#d9d6c3","#733a31","#76624c","#508a88","#d1c7b7","#54211d","#6d5826","#70a19f","#f2eada","#78331e","#ffc20e","#50b7c1","#d3d7d4","#53261f","#fdb933","#00a6ac","#999d9c","#f15a22","#d3c6a6","#78cdd1","#a1a3a6","#b4533c","#c7a252","#008792","#9d9087","#84331f","#dec674","#94d6da","#8a8c8e","#f47a55","#b69968","#afdfe4","#74787c","#f15a22","#c1a173","#5e7c85","#7c8577","#f3704b","#dbce8f","#76becc","#72777b","#da765b","#ffd400","#90d7ec","#77787b","#c85d44","#ffd400","#009ad6","#4f5555","#ae5039","#ffe600","#145b7d","#6c4c49","#6a3427","#f0dc70","#11264f","#563624","#8f4b38","#fcf16e","#7bbfea","#3e4145","#8e3e1f","#decb00","#33a3dc","#3c3645","#f36c21","#cbc547","#228fbd","#464547","#b4532a","#6e6b41","#2468a2","#130c0e","#b7704f","#596032","#2570a1","#281f1d","#de773f","#525f42","#2585a6","#2f271d","#c99979","#5f5d46","#1b315e","#1d1626"];
BM.geoJSON(data,{
style:function () {
return {color: 'white',fillColor:all[Math.floor(Math.random()*all.length)],weight:1,fillOpacity:0.9};
},
onEachFeature:function (feature,layer) {
feature.properties&&feature.properties.name&&layer.bindTooltip(feature.properties.name,{direction:'bottom',className:'my_tooltip',permanent:true});
}
}).on('mouseover',function (e) {
e.layer.setStyle({color: 'white',fillColor:all[Math.floor(Math.random()*all.length)],weight:1,fillOpacity:0.9});
}).on('mouseout',function (e) {
e.layer.setStyle({color: 'white',fillColor:all[Math.floor(Math.random()*all.length)],weight:1,fillOpacity:0.9});
}).addTo(map);
});
BM.marker(map.getCenter()).addTo(map);
</script>