一键离线地图开发服务器
离线地图开发主要有两部分组成：1、获取离线地图数据；因为离线地图一般都是局域网，所以需要离线地图数据放在内网中使用；2、离线地图服务器搭建以及二次开发接口提供，离线地图是一种服务，就像我们Apache提供的WEB服务器一样，他是一种准们的地图服务：提供了包括 WEB服务、TMS服务、WMTS服务等等。
离线地图数据的获取：可以通过【大地图下载器】下载到。
要进行谷歌离线地图的开发，最简单的方式就是安装【离线地图服务器】，安装好地图就搭建完成了，就可以进行二次开发 了。
离线地图服务器，如下图：
离线地图开发画多变形 效果图：
离线地图画多边形的源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制</title>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
<script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
<link href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
<!--
以下CSS地址请在安装软件了替换成本地的地址
CSS地址请使用:
http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
JS地址请使用：
http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html
-->
<!--<link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />-->
<!--<script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>-->
<!--引入鼠标绘制的JS+CSS-->
<!--对应下面的CSS+JS的下载地址 请直接访问 http://bigemap.com/Public/mouse_draw/mouse_draw.zip 来下载-->
<link rel="stylesheet" href="/Public/mouse_draw/Bigemap.draw.css"/>
<script src="/Public/mouse_draw/Bigemap.draw.js"></script>
<script src="/Public/mouse_draw/Bigemap.Draw.Event.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Feature.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Polyline.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Polygon.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.SimpleShape.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Rectangle.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Circle.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Marker.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.CircleMarker.js"></script>
<script src="/Public/mouse_draw/edit/handler/Edit.Poly.js"></script>
<script src="/Public/mouse_draw/edit/handler/Edit.SimpleShape.js"></script>
<script src="/Public/mouse_draw/edit/handler/Edit.Rectangle.js"></script>
<script src="/Public/mouse_draw/edit/handler/Edit.Marker.js"></script>
<script src="/Public/mouse_draw/edit/handler/Edit.CircleMarker.js"></script>
<script src="/Public/mouse_draw/edit/handler/Edit.Circle.js"></script>
<script src="/Public/mouse_draw/ext/TouchEvents.js"></script>
<script src="/Public/mouse_draw/ext/LatLngUtil.js"></script>
<script src="/Public/mouse_draw/ext/GeometryUtil.js"></script>
<script src="/Public/mouse_draw/ext/LineUtil.Intersect.js"></script>
<script src="/Public/mouse_draw/ext/Polyline.Intersect.js"></script>
<script src="/Public/mouse_draw/ext/Polygon.Intersect.js"></script>
<script src="/Public/mouse_draw/Control.Draw.js"></script>
<script src="/Public/mouse_draw/Tooltip.js"></script>
<script src="/Public/mouse_draw/Toolbar.js"></script>
<script src="/Public/mouse_draw/draw/DrawToolbar.js"></script>
<script src="/Public/mouse_draw/edit/EditToolbar.js"></script>
<script src="/Public/mouse_draw/edit/handler/EditToolbar.Edit.js"></script>
<script src="/Public/mouse_draw/edit/handler/EditToolbar.Delete.js"></script>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body,#map{
width: 100%;
height: 100%;
}
#start{
position: absolute;
z-index: 10;
right: 20px;
top:20px;
display: inline-block;
width: 150px;
}
</style>
<body>
<button id="start" class="button button-tiny button-rounded button-primary">绘制多边形</button>
<div id="map">
</div>
<script>
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.googlemap-streets，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图 ，中心点，默认的级别和显示级别控件
var map = BM.map('map', 'bigemap.googlemap-streets', {center: [30, 104], zoom: 8, zoomControl: true });
//创建一个图形覆盖物的集合来保存点线面
var drawnItems = new BM.FeatureGroup();
//添加在地图上
map.addLayer(drawnItems);
// var polygon = new BM.Polyline([
// [51.51, -0.1],
// [51.5, -0.06],
// [51.52, -0.03]
// ]);
//
// polygon.editing.enable();
//
// polygon.on('contextmenu',function (e) {
// console.log(this);
// });
//
// polygon.addTo(map);
// map.on(BM.Draw.Event.EDITSTOP,function () {
// console.log(this);
// });
//监听绘画完成事件
map.on(BM.Draw.Event.CREATED, function (e) {
var layer = e.layer;
console.log(e.layer);
drawnItems.addLayer(layer);
});
//设置一个变量来保存当前的绘制对象
var draw;
document.querySelector('#start').οnclick=function () {
if (!draw){
draw=new BM.Draw.Polygon(map);
}
draw.enable();
}
</script>
</body>
</html>
