Plain——使用同一套代码建立你的 web 地图应用

使用同一套代码建立你的 web 地图应用。 ✨ github.com/XingzheFE/p…

English | 简体中文

特性

1. Layers
   1. Marker
   2. Polyline
   3. Popup
2. Map Controls
   1. zoom
   2. fitView
   3. panTo
3. Evented
4. Utils
   1. getBound
   2. locate
   3. coordinate translate

如何使用

安装

使用 npm 安装 plain-js，你也能够在页面中引入构建后的 js 文件。

$ npm install plain-js --save
复制代码

建立地图

建立地图的方式很简单，最直接的方式是在 html 文件中引入地图库的脚本文件以及 plain.min.js

// 首先初始化一个 plain 对象
let plain = new Plain();

// 设置须要使用的坐标系，若是不设置的话全部地图使用默认的坐标系，
// Google 和 高德地图在大陆使用 GCJ02，百度地图使用 BD09，
// 为了方便开发建议设置为 GCJ02
plain.setCoordType("GCJ02");

// 告诉 plain 你须要使用 Google 地图，
// 可选的参数有 Google Map "GMAP"， 高德地图 "AMAP"， 百度地图 "BMAP"
plain.use("GMAP");

// 建立一个 Google 地图实例
let map = plain.Map({
    container: "#map",          // DivElement
    center: [39.908012, 116.399348],
    zoom: 15
});
复制代码

或者使用回调的方式建立

let plain = new Plain().use("GMAP");
let key = "[your access key]";
plain.loadMap(key, () => {
    let map = window.map = plain.Map({
        container: document.getElementById("map"),
        center: [39.910, 116.404],
        zoom: 15
    });
}, err => {
    // TODO:
};

复制代码

添加 Marker

let marker = plain.Marker([39.910, 116.404]);
map.addLayer(marker);   // 也可传入一个数组
复制代码

若是想让 Marker 变得不同也是能够的，在 Marker 方法中传入第二个参数：

// 自定义 icon
let icon = plain.Icon({
    url: "https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png",
    size: [25, 40],
    anchor: [12.5, 40]
});

// Marker configure option
let markerOpt = {
    icon: icon,
    draggable: true
};
let marker2 = plain.Marker([39.910, 116.404], markerOpt);
map.addLayer(marker2);
map.removeLayer(marker);    // 能够从地图中移除以前建立的标记
复制代码

添加 Polyline

向地图中添加折线以前须要先定义一个二维数组，注意：咱们默认传入的坐标格式是 [lat: Number, lng: Number]

let path = [
    [39.910, 116.404],
    [39.71, 116.5],
    [39.909, 117],
    [39.710, 118]
];
let polyline = plain.Polyline(path, {
    color: "#f00",
    weight: 2,
    opacity: 0.8
});
map.addLayer(polyline);
复制代码

自定义覆盖物及 Popup

let layer = plain.Layer()
    .setContent("text or Element")
    .setLatLng([31, 116])
    .mount(map)
    .show()
    .hide()
    .unmount();
let popup = plain.Popup({closeBtn: false})
    .setContent(document.createElement("button"))
    .setLatLng([31, 116])
    .mount(map)
    .show()
    .hide()
    .unmount();
复制代码

事件

到目前为止，咱们已经能够建立一个展现基本信息的地图了，那么接下来就给地图绑定下点击事件的响应方法。 plain 提供了一个工具方法格式化传入的事件对象，返回的值格式以下

class Event {
    e: any;             // 原始的事件对象
    p: F.LatLng;        // 坐标 [lat: number, lng: number]
    target: F.Layer;    // 触发事件的对象
    type: string;       // 事件名
}
复制代码

其中坐标 p 为最初 plain.setCoordType("GCJ02"); 设置的格式，若是没有设置，那么返回的值和原生地图库一致。

let listener = map.on("rightclick", function (e) {
    console.log(plain.Util.formatEvent.call(this, e));
    // 顺便校订下地图窗口
    map.fitView(path);
});
复制代码

接下来咱们要取消事件监听：

map.off(listener);
复制代码

点击此处查看更多示例

有疑问和建议请建立 issue 哦。

License

plain is MIT licensed.