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.