Plain——使用同一套代碼創建你的 web 地圖應用

使用同一套代碼創建你的 web 地圖應用。 ✨ https://github.com/XingzheFE/...

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/[email protected]/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);

點擊此處查看更多示例

License

plain is MIT licensed.