插件的使用

缩略地图

提供缩略地图插件,默认位于地图右下方，是一个可折叠的缩略地图。

<link rel="stylesheet" href="../lib/Control.MiniMap.css">
<script src="../lib/Control.MiniMap.min.js"></script>
<script>
// 设置地图瓦片层url
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJGQU5HaTIyR0VOeUhsTTJCZ211bEhpRGhtR2pFYmFLYyIsInVzZXIiOiJndWVzdCJ9.CJ9JuWCxrx4U40K%2FHoBcgqP%2Bgn%2BWqXE9io6eCxi6g9g%3D"
var layer = FMap.tileLayer('http://map.botaisoft.com/apis/v1/rastertiles/mix_map/{z}/{x}/{y}.png?token=' + token);
// 创建地图实例
var mapMinmap = new FMap.Map('mapMinmap', {
    // 设置中心点坐标
    center: new FMap.LatLng(38.92705, 121.6580833),
    // 设置地图缩放级别
    zoom: 13,
    maxZoom: 17,
    minZoom: 3,
    // 设置地图实例瓦片层
    layers: [layer]
});

var layerCopy = FMap.tileLayer('http://map.botaisoft.com/apis/v1/rastertiles/mix_map/{z}/{x}/{y}.png?token=' + token);
var miniMap = new FMap.Control.MiniMap(layerCopy, { toggleDisplay: true });
miniMap.addTo(mapMinmap);
</script>

测量

提供测量插件，默认位于地图右上角。

<link rel="stylesheet" href="../lib/fmap-measure.css">
<script src="../lib/fmap-measure.min.js"></script>
<script>
// 设置地图瓦片层url
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJGQU5HaTIyR0VOeUhsTTJCZ211bEhpRGhtR2pFYmFLYyIsInVzZXIiOiJndWVzdCJ9.CJ9JuWCxrx4U40K%2FHoBcgqP%2Bgn%2BWqXE9io6eCxi6g9g%3D"
var layer = FMap.tileLayer('http://map.botaisoft.com/apis/v1/rastertiles/mix_map/{z}/{x}/{y}.png?token=' + token);
// 创建地图实例
var mapMeasure = new FMap.Map('mapMeasure', {
    // 设置中心点坐标
    center: new FMap.LatLng(38.92705, 121.6580833),
    // 设置地图缩放级别
    zoom: 13,
    maxZoom: 17,
    minZoom: 3,
    // 设置地图实例瓦片层
    layers: [layer]
});
FMap.control.measure().addTo(mapMeasure);
</script>

绘制

提供绘制插件，默认位于地图左上角

<div id="mapDraw" style="width: 100%;height: 250px"></div>
<link rel="stylesheet" href="../lib/fmap.draw.css">
<script src="../lib/fmap.draw.js"></script>
<script>
// 设置地图瓦片层url
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJGQU5HaTIyR0VOeUhsTTJCZ211bEhpRGhtR2pFYmFLYyIsInVzZXIiOiJndWVzdCJ9.CJ9JuWCxrx4U40K%2FHoBcgqP%2Bgn%2BWqXE9io6eCxi6g9g%3D"
var layer = FMap.tileLayer('http://map.botaisoft.com/apis/v1/rastertiles/mix_map/{z}/{x}/{y}.png?token=' + token);
// 创建地图实例
var mapDraw = new FMap.Map('mapDraw', {
    // 设置中心点坐标
    center: new FMap.LatLng(38.92705, 121.6580833),
    // 设置地图缩放级别
    zoom: 13,
    maxZoom: 17,
    minZoom: 3,
    // 设置地图实例瓦片层
    layers: [layer]
});

var drawnItems = FMap.featureGroup().addTo(mapDraw);
mapDraw.addControl(new FMap.Control.Draw({
    edit: { featureGroup: drawnItems }
}));
mapDraw.on('draw:created', function (event) {
    var layer = event.layer;
    drawnItems.addLayer(layer);
});

</script>