区块链技术博客
www.b2bchain.cn

Mapbox GL JS 自定义插件——实时经纬度显示求职学习资料

D0b2wT.gif

本文介绍了Mapbox GL JS 自定义插件——实时经纬度显示求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

mapboxgl 官方提供了很多插件,如线面绘制、地图导航、比例尺等。如果我们自定义的功能也封装成插件,那调用维护都会带来极大的方便,下面介绍下mapboxgl 插件开发过程(实时经纬度显示)。

1、插件基本结构

class XXX {   constructor() {       // 构造函数   }   onAdd() {       // 插件添加到地图时调用   }   onRemove() {     // 插件从地图移除时调用     } }

2、初始插件

onAdd() {     const el = document.createElement("div");     el.className = 'mouse-position';     el.style.cssText = "position: absolute; bottom: 5px; z-index: 1; top: 20px; right: 20px; color: blue;font-size: 16px; width: 210px; height: 20px;";     this._el = el;     return el; }

3、移除插件

onRemove() {     this._el.parentNode.removeChild(this._el);     return this; }

经过上面二步,插件的外观(html/css)就完成,但这时候插件是无经纬内容的。接下来,我们需要去更新插件的内容。

4、注册事件

“`javascript
bindEvent() {
//注册鼠标移动事件
this._map.on(‘mousemove’, this.update.bind(this));
}
update(e) {
// 更新插件内容
this._el.innerHTML =
‘经度:’ +
e.lngLat.lng.toFixed(2) +

mapboxgl 官方提供了很多插件,如线面绘制、地图导航、比例尺等。如果我们自定义的功能也封装成插件,那调用维护都会带来极大的方便,下面介绍下mapboxgl 插件开发过程(实时经纬度显示)。

1、插件基本结构

class XXX {   constructor() {       // 构造函数   }   onAdd() {       // 插件添加到地图时调用   }   onRemove() {     // 插件从地图移除时调用     } }

2、初始插件

onAdd() {     const el = document.createElement("div");     el.className = 'mouse-position';     el.style.cssText = "position: absolute; bottom: 5px; z-index: 1; top: 20px; right: 20px; color: blue;font-size: 16px; width: 210px; height: 20px;";     this._el = el;     return el; }

3、移除插件

onRemove() {     this._el.parentNode.removeChild(this._el);     return this; }

经过上面二步,插件的外观(html/css)就完成,但这时候插件是无经纬内容的。接下来,我们需要去更新插件的内容。

4、注册事件

“`javascript
bindEvent() {
//注册鼠标移动事件
this._map.on(‘mousemove’, this.update.bind(this));
}
update(e) {
// 更新插件内容
this._el.innerHTML =
‘经度:’ +
e.lngLat.lng.toFixed(2) +

mapboxgl 官方提供了很多插件,如线面绘制、地图导航、比例尺等。如果我们自定义的功能也封装成插件,那调用维护都会带来极大的方便,下面介绍下mapboxgl 插件开发过程(实时经纬度显示)。

1、插件基本结构

class XXX {   constructor() {       // 构造函数   }   onAdd() {       // 插件添加到地图时调用   }   onRemove() {     // 插件从地图移除时调用     } }

2、初始插件

onAdd() {     const el = document.createElement("div");     el.className = 'mouse-position';     el.style.cssText = "position: absolute; bottom: 5px; z-index: 1; top: 20px; right: 20px; color: blue;font-size: 16px; width: 210px; height: 20px;";     this._el = el;     return el; }

3、移除插件

onRemove() {     this._el.parentNode.removeChild(this._el);     return this; }

经过上面二步,插件的外观(html/css)就完成,但这时候插件是无经纬内容的。接下来,我们需要去更新插件的内容。

4、注册事件

“`javascript
bindEvent() {
//注册鼠标移动事件
this._map.on(‘mousemove’, this.update.bind(this));
}
update(e) {
// 更新插件内容
this._el.innerHTML =
‘经度:’ +
e.lngLat.lng.toFixed(2) +

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Mapbox GL JS 自定义插件——实时经纬度显示求职学习资料
分享到: 更多 (0)
D0b2wT.gif

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们