BigeMap学习
我觉得bigemap就是依托,因为有些东西并不是他自己原创的,我觉得他是“借鉴”了Cesium,某部分的功能太像了。总不能说是Cesium借鉴了bigemap吧。感受归感受,我的项目里面还是要用它,因为公司要用。
现在来讲讲一些常用的东西吧:
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
// 这个是使用前提,必须引入
<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/Public/common/js/jquery.min.js"></script>
<script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
<style>
html,
body,
#map {
margin: 0;
padding: 0;
height: 100%;
width: 100%
}
.popInfo {
border-radius: 5px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script>
// 这个也是一定要设置请求地图的host和port
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000'
const map = BM.map('map', 'bigemap.ctfzk21h', {
center: [30, 104],
zoom: 3,
zoomControl: true,//级别控制
preferCanvas: false,//优先使用canvas绘制覆盖物
keyboard: true,//键盘操作
scrollWheelZoom: true,//鼠标滚轮放大
doubleClickZoom: false,//双击放大
dragging: false, //启动拖动
attributionControl: false //不添加对应的版本信息
});
</script>
</html>
常用功能
这里我就直接展示js代码,以为html部分基本是重复的。
合并两个图层
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000'
const map = BM.map('map', null, {
center: [30, 104],
zoom: 3,
attributionControl: false,// 显示归属信息
zoomControl: true, // 显示缩放控件
});
//全国的数据下载到了 5级,成都的数据下载了 14级
const layer1 = BM.tileLayer('bigemap.ctfzk21h')
const layer2 = BM.tileLayer('bigemap.9ss9fohh');
map.setMaxZoom(13);
layer1.addTo(map);
setTimeout(() => {
Object.assign(layer1.options, {
maxNativeZoom: 5,
maxZoom: 13
})
}, 500)
layer2.addTo(map)
添加视频图层
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
var map = BM.map('map', 'bigemap.amap-satellite', {
center: [30.4, 104.5],
zoom: 7,
zoomControl: true,
attributionControl: false
});
const videoUrls = [
'../public/v1.mp4'
];
const bounds = BM.latLngBounds([
[32, -130],
[13, -100]
]);
map.fitBounds(bounds);
const videoOverlay = BM.videoOverlay(videoUrls, bounds, {
opacity: 0.8
}).addTo(map);
videoOverlay.getElement().play();
覆盖物
覆盖物比较多,有圆形,矩形等。但是常用的应该是多边形,这里就先用矩形演示:其他的可以自己去查阅
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
var map = BM.map('map', 'bigemap.amap-satellite', {
center: [30.4, 104.5],
zoom: 7,
zoomControl: true,
attributionControl: false
});
// 创建一个矩形覆盖物
var bounds = BM.latLngBounds([
[32, -130],
[13, -100]
]);
// polygon多边形
// 添加到地图
BM.rectangle(bounds, { color: '#1f1f1f', weight: 1 }).addTo(map);
// 使地图的视野适应指定的矩形区域 bounds,即地图会自动缩放并平移,使得整个矩形区域完全可见。
map.fitBounds(bounds);
手绘地图
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
//创建地图
var map = BM.map('map', 'bigemap.zhongkexingtu', {
center: [22.906279484467223, 114.10481473882101],
zoom: 16,
zoomControl: true,
attributionControl: false
});
//创建一个瓦片图层
const offline = BM.tileLayer('bigemap.4axbqvwm');
// 添加到地图
offline.addTo(map)
航拍图像发布
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
//创建地图
var map = BM.map('map', null, {
center: [23.039393450126127, 113.48061370849608],
zoom: 17,
zoomControl: true,
attributionControl: false
});
//创建一个瓦片图(实例化航拍的图)
var offline = BM.tileLayer('bigemap.773nfa3w');
//创建一个瓦片图(实例化谷歌卫星地图)
var google_satellite = BM.tileLayer('bigemap.zhongkexingtu');
//将两个图层添加在地图上面(注意顺序,谁覆盖谁)
google_satellite.addTo(map);
offline.addTo(map)
图层切换
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图,不要设置地图ID,ID号程序自动生成,无需手动配置,设置中心点,默认的级别和显示级别控件
const map = BM.map('map', null, {
center: [30, 104],
zoom: 3,
zoomControl: true,
attributionControl: false,
minZoom: 3
});
const arcgis_satellite = BM.tileLayer('bigemap.zhongkexingtu');
arcgis_satellite.addTo(map);
const arcgis_street = BM.tileLayer('bigemap.amap-map');
// 使用图层1
function useLayer1() {
arcgis_satellite.addTo(map);
arcgis_street.remove();
}
// 使用图层2
function useLayer2() {
arcgis_street.addTo(map);
arcgis_satellite.remove();
}
地图锚点
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图,不要设置地图ID,ID号程序自动生成,无需手动配置,设置中心点,默认的级别和显示级别控件
const map = BM.map('map', null, {
center: [30, 104],
zoom: 3,
zoomControl: true,
attributionControl: false,
minZoom: 3
});
// 1.添加默认锚点
const marker = BM.marker([30, 104]).addTo(map);
// 动态更换icon
marker.setIcon(
BM.icon({
iconUrl: ` http://www.bigemap.com/mapoffline/marker/1.png`,
iconSize: [25, 40],
iconAnchor: [12.5, 40],
})
);
// 2.添加自定义锚点
const anchor = BM.marker([30, 105], {
icon: BM.icon({
iconUrl: '../public/map.png',
iconSize: [32, 32]
})
}).addTo(map);
事件
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图,并设置地图的ID号,ID号程序自动生成,无需手动配置 ,中心点,默认的级别和显示级别控件
var map = BM.map('map', 'bigemap.zhongkexingtu', {
center: [0, 0],
zoom: 3,
zoomControl: true,
attributionControl: false,
preferCanvas: true, minZoom: 3
});
// 地图点击事件
map.on('click', e => {
console.log("单击", e)
})
// 地图拖动事件
map.on('moveend', function (e) {
console.log("拖动", e)
});
//地图缩放事件(缩放事件也会同时触发moveend事件)
map.on('zoomend', function (e) {
console.log("缩放", e)
});
// 覆盖物事件(锚点、多边形覆盖物)
const marker = BM.marker([30, 104], {
draggable: true,// 是否可拖动
}).addTo(map);
marker.bindPopup(`我是的标注`, {
className: "popInfo", //要分配给弹出窗口的自定义CSS类名称
autoClose: false, // 将它设置为false,如果你想另一个弹出打开时覆盖弹出关闭的默认行为。
// closeOnClick:false //如果要在用户单击地图时覆盖弹出窗口关闭的默认行为,请设置它。
}).openPopup();
marker.on("dragstart", function (e) {
marker.setPopupContent(
`<div>
<p>现在我被拖动啦</p>
<p>从${e.target._latlng}离开</p>
</div>`
).openPopup();
});
marker.on("dragend", function (e) {
marker.setPopupContent(
`<div>
<p>现在我停下啦</p>
<p>到${e.target._latlng}结束</p>
</div>`
).openPopup();
});
marker.on("click", function (e) {
marker.setPopupContent(
`<div>
<p>点我干什么,又不会换人</p>
</div>`
).openPopup();
});
地图视角移动
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图,并设置地图的ID号,ID号程序自动生成 ,中心点,默认的级别和显示级别控件
var map = BM.map('map', 'bigemap.zhongkexingtu', {
center: [0, 0],
zoom: 2,
zoomControl: true,
attributionControl: false
});
// 将地图视角移动到指定的位置,并设置地图的级别和动画效果(经纬度,级别,动画效果)
map.flyTo(BM.latLng(30, 104), 14, { animate: true, duration: 4 });
限制地图拖动
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图,并设置地图的ID号,ID号程序自动生成,无需手动配置,中心点,默认的级别和显示级别控件
const map = BM.map('map', 'bigemap.zhongkexingtu', {
center: [30, 102],
zoom: 9,
zoomControl: true,
attributionControl: false
});
//限制地图浏览范围(左下家 右上角)
map.setMaxBounds([[30, 100], [34, 105]]);
坐标转换(常用)
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图,并设置地图的ID号为bigemap.zhongkexingtu,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件
const map = BM.map('map', 'bigemap.zhongkexingtu', {
center: [30.4, 104.5],
zoom: 7,
zoomControl: true,
attributionControl: false
});
// 经纬度转平面坐标
const c = map.project(e.latlng);
// 平面坐标转经纬度
const p = map.unproject(c);
如果,上面这些方法,你都会了,恭喜你算是入了基础了。进阶的内容,还是要根据自己是实际业务区官网找资料。有什么问题,可以留言。