BigeMap基本使用

海上彼尚

于 2024-08-21 11:59:09 发布

阅读量279

点赞数 3

分类专栏：前端开发插件文章标签： js

本文链接：https://blog.csdn.net/weixin_63443072/article/details/141390040

版权

前端开发插件专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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);

如果，上面这些方法，你都会了，恭喜你算是入了基础了。进阶的内容，还是要根据自己是实际业务区官网找资料。有什么问题，可以留言。

海上彼尚

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
BigeMap基本使用

我觉得bigemap就是依托，因为有些东西并不是他自己原创的，我觉得他是“借鉴”了Cesium，某部分的功能太像了。总不能说是Cesium借鉴了bigemap吧。感受归感受，我的项目里面还是要用它，因为公司要用。
复制链接

扫一扫

专栏目录