BIGEMPA Js API示例中心
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel='stylesheet'/>
<link href="http://www.xawiki.com/Public/css/button.min.css" rel="stylesheet">
<script src='http://bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#form {
position: absolute;
top: 30px;
right: 30px;
text-align: right;
}
.my-div-icon {
border-radius: 5px;
background-color: #333;
opacity: 0.9;
box-shadow: 0px 0px 8px #000
}
#text {
color: #f00;
}
</style>
<title>動態貼圖 修改尺寸</title>
</head>
<body>
<div id='map'></div>
<div id="form">
<label for="upload" class="button button-tiny button-rounded button-primary">上傳</label>
<input type="file" id="upload" accept=".jpg,.jpeg,.png" hidden>
<p id="text"></p>
</div>
<script>
BM.Config.HTTP_URL = 'http://bigemap.com:9000';
var map = BM.map('map', 'bigemap.amap-map', { center: [0, 0], zoom: 3, zoomControl: false });
window.map = map
window.BM = BM
var imageBounds = [
[39.939229, 116.327911,],
[39.946275, 116.342659,]
]
var imagesOverlay = BM.imageOverlay('/offline_data/images/dongwuyuan.jpg',imageBounds, {
bubblingMouseEvents: false, // 如果true，此圖層上的鼠標事件將在地圖上觸發相同的事件（除非BM.DomEvent.stopPropagation使用）。
interactive: true, // 如果true，圖像疊加將在單擊或懸停時發出鼠標事件。
zIndex: 9,
className: 'myImagesOverlay'
}).addTo(map)
var bounds = imagesOverlay.getBounds()
map.fitBounds(bounds)
var featureGroup = create(bounds, imagesOverlay)
featureGroup.addTo(map)
var upload = document.querySelector('#upload')
var name = null
upload.onchange = (e) => {
var files = e.target
if(name == files.files[0].name) {
document.querySelector('#text').innerHTML = '兩次圖片不能相同'
return
}
if (!checkFormat(files.files[0])) {
document.querySelector('#text').innerHTML = '請選擇jpg, png, jpeg格式'
return;
}
document.querySelector('#text').innerHTML = ''
var reader = new FileReader()
reader.readAsDataURL(files.files[0]);
reader.onload = function(e) {
var data = e.target.result
// 處理文件數據
imagesOverlay.setUrl(data)
name = files.files[0].name
files.value = null
}
}
function create(bounds, imagesOverlay) {
var markerList = []
for(var key in bounds) {
if (bounds.hasOwnProperty(key)) {
var icon = BM.divIcon({
html: '<div></div>',
// iconAnchor: [30, 0],
iconSize: [16, 16],
className: 'my-div-icon'
});
var marker = BM.marker(bounds[key],{
icon: icon,
draggable:true
});
marker.text = key
markerList.push(marker)
}
}
var featureGroup = BM.featureGroup([...markerList])//featureGroup會傳播綁定在上面的事件
featureGroup.eachLayer(function (layer) {
layer.on('move',function (e) {
bounds[layer.text] = e.latlng
imagesOverlay.setBounds(bounds);
})
})
return featureGroup
}
function checkFormat(o) {
var filename = o.name;//文件名稱
var suffix = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase(); //png jpg等
var file_format = ['jpg', 'png', 'jpeg'];
// 看看這個后綴存不存在于file_format數組當中
if (file_format.includes(suffix)) {
return true
}
return false
}
</script>
</body>
</html>