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

loonggg 发布于2019-08-23 18:14 / 878人阅读

摘要：简体中文特性如何使用安装使用安装，你也可以在页面中引入构建后的文件。顺便校正下地图窗口接下来我们要取消事件监听点击此处查看更多示例

使用同一套代码创建你的 web 地图应用。 ✨ https://github.com/XingzheFE/...

English | 简体中文

特性

Layers

Marker

Polyline

Popup

Map Controls

zoom

fitView

panTo

Evented

Utils

getBound

locate

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);

点击此处查看更多示例

License

plain is MIT licensed.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104900.html

通过Weex 300行代码开发一款简易的跑步App

摘要：你就可以在目录下用或者开发应用代码了设计原理结合了高德地图多个功能，比如定位，地图缩放，绘制折现，进行点的标记等常用功能。文件源代码打包运行开发完毕后，我们可以运行命令，让它安装到我们的测试手机上。 Weex正如它的目标，一套构建高性能、可扩展的原生应用的跨平台开发方案 Weex 给大家带来的无疑是客户端开发效率的提升，我们可以通过一套代码，实现web，android, iOS的三个...

isaced 2019-08-20 15:31 评论0 收藏0
PHP面试之二：高并发与大数据

摘要：三态分别是就绪运行阻塞进程的五态模型在三态的基础上发展而来新建态运行态终止态就绪态等待态线程称之为轻量级的进程，程序执行流的最小单元。一个进程下有多个线程来完成不同的工作称之为多线程。 web资源防盗链盗链是什么？为什么要防？在自己页面上显示一些不是自己服务器的资源（图片、音频、视频、css、js等）由于别人盗链你的资源会加重你的服务器负担，所以我们需要防止可能会影响统计防盗链...

Ashin 2019-07-01 12:23 评论0 收藏0
[译] 解密 Uber 数据部门的数据可视化最佳实践

摘要：让我们看看都做了哪些工作可视化分析增强数据可操作性测试平台的表格和置信区间可视化可视化分析主要都是由抽象数据可视化组成的。大多数有效的可视化分析在这种情况下都是关于报告仪表盘实时分析的图标和网络图。 showImg(https://segmentfault.com/img/remote/1460000006771644); 概述在2015年初，我们在Uber规划了一个官方的数据科学团...

darkbug 2019-08-19 18:21 评论0 收藏0
[译] 解密 Uber 数据部门的数据可视化最佳实践

摘要：让我们看看都做了哪些工作可视化分析增强数据可操作性测试平台的表格和置信区间可视化可视化分析主要都是由抽象数据可视化组成的。大多数有效的可视化分析在这种情况下都是关于报告仪表盘实时分析的图标和网络图。 showImg(https://segmentfault.com/img/remote/1460000006771644); 概述在2015年初，我们在Uber规划了一个官方的数据科学团...

susheng 2019-07-25 10:25 评论0 收藏0
[译]为什么前端初学者必须要明白发布订阅模式

摘要：应用需要正确并合适响应各种网络请求用户操作计时事件和各种延时动作。好了，我们的新流程图画出来了提示城市名称查找不是很复杂，谷歌地图为此提供了非常简单的。形象点表示就是，函数是一等公民。 By Hubert Zub | Oct 3, 2018 原文当你将关注点从样式，美学和网格系统转移到逻辑，框架和编写JavaScript代码时。一切都开始了，你会发现你处于你的web开发历程中最激动人...

miqt 2019-08-23 12:38 评论0 收藏0