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

mapbox-gl | 1.4 完整示例与地图组件的注意事项求职学习资料

本文介绍了mapbox-gl | 1.4 完整示例与地图组件的注意事项求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

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

简述

回顾了一下之前写的四节内容,发现并没有给出一个完整的Demo示例,为了方便后面的讲解,这里提供一个简单的模板,同时补充一些在前端框架中,写地图组件的注意事项,也希望你能把自己的经验分享在评论区,共同进步。

示例

html

<div id="map" ></div>

js

mapboxgl.accessToken = "ACCESS_TOKEN";   const map = new mapboxgl.Map({     container: "map", // div的id     style: style, // 'mapbox://styles/mapbox/streets-v11' 可直接用这个地址     center: [116.39104843139647, 39.912287369097186], // 地图加载后默认中心点     zoom: 15, // 地图缩放比例   });   // load 也可以写成style.load   map.on("load", () => {     // 加载图层,注册事件等都需要写在这里面   });

css

#map {   /* 宽高 */   height: 100%;   width: 100%; }

地图组件注意事项(vue)

在日常的开发工作中,项目一般会使用前端框架作为基础,在其上做业务的实现,封装一个地图组件是GIS开发的日常,下面会提供几个注意事项,希望对你有帮助。

绑定数据

不要将map在data中定义,这会导致vue一直监听map的变化,整个地图会变卡,可以选择直接this.map去赋值,也可以在vue对象外定义一个变量存储。

规范代码逻辑

不同于其他前端组件或页面,代码逻辑并不会太多,地图组件稍不注意就有几百行的代码量,如果是vue3,那么直接写在js/ts文件里,vue2也能这么做。

GIS代码用一个一个函数分割开,保证代码的可读性,在methods里,例如:

methods: {   // init   // 初始化地图   initMap(){}   // 初始化图层,在map.on中调用   initLayers(){}   // 初始化地图/图层事件 在map.on中调用   initMapEvents(){}   // function   // 控制图层显隐   hiddenAndShow(){}   // 缩放至某某地方   flyToSomeWhere(){}   // 修改图层数据   editLayer(){}   // web-gis   // 对另外的组件/页面进行操作   operateOhter(){}   // 其他组件想调用地图数据或进行操作   otherOperateMap(){}   // .... }

这么做的目的是可读,方便自己改bug,也方便他人改你的代码,我简单的将methods分为:初始化、功能、对外(其他组件/页面)接口

与其他组件的交互(有争议,欢迎讨论)

从我个人开发经历来讲,这个问题并不好解决,每种交互方式都会带来不同的问题。

这里所说的交互,是与其他组件的通信方式,举例来讲,有一块大屏,中间是地图,周围是图表和其他内容,图表需要调用地图的数据,该如何去传递呢?

实现传输是简单的,问题在于规范的交互传输,目前,我曾使用过以下几种方式:

  1. store 存储变量,通过监听变量进行传递
  2. bus 通信
  3. 其他组件直接调用相对应的方法,地图组件相当于后台接口,反之亦然。 ### 数据处理 在很多场景中,数据并不符合业务的需求,需要进行处理,这时候一定注意代码的逻辑与执行效率。 ### 性能 对于刚入门的同学来说,在开发过程中要注意,每当一个功能或业务逻辑堆叠在项目时,首先注意的是 是否互相影响,其次注意页面运行是否变卡顿了,是前者,那么是出现了bug;是后者,你可以先初步鉴定一下,没有办法解决的话,也要及时做记录,后面如果有提升性能的需求,你也会有好的入手点。

简述

回顾了一下之前写的四节内容,发现并没有给出一个完整的Demo示例,为了方便后面的讲解,这里提供一个简单的模板,同时补充一些在前端框架中,写地图组件的注意事项,也希望你能把自己的经验分享在评论区,共同进步。

示例

html

<div id="map" ></div>

js

mapboxgl.accessToken = "ACCESS_TOKEN";   const map = new mapboxgl.Map({     container: "map", // div的id     style: style, // 'mapbox://styles/mapbox/streets-v11' 可直接用这个地址     center: [116.39104843139647, 39.912287369097186], // 地图加载后默认中心点     zoom: 15, // 地图缩放比例   });   // load 也可以写成style.load   map.on("load", () => {     // 加载图层,注册事件等都需要写在这里面   });

css

#map {   /* 宽高 */   height: 100%;   width: 100%; }

地图组件注意事项(vue)

在日常的开发工作中,项目一般会使用前端框架作为基础,在其上做业务的实现,封装一个地图组件是GIS开发的日常,下面会提供几个注意事项,希望对你有帮助。

绑定数据

不要将map在data中定义,这会导致vue一直监听map的变化,整个地图会变卡,可以选择直接this.map去赋值,也可以在vue对象外定义一个变量存储。

规范代码逻辑

不同于其他前端组件或页面,代码逻辑并不会太多,地图组件稍不注意就有几百行的代码量,如果是vue3,那么直接写在js/ts文件里,vue2也能这么做。

GIS代码用一个一个函数分割开,保证代码的可读性,在methods里,例如:

methods: {   // init   // 初始化地图   initMap(){}   // 初始化图层,在map.on中调用   initLayers(){}   // 初始化地图/图层事件 在map.on中调用   initMapEvents(){}   // function   // 控制图层显隐   hiddenAndShow(){}   // 缩放至某某地方   flyToSomeWhere(){}   // 修改图层数据   editLayer(){}   // web-gis   // 对另外的组件/页面进行操作   operateOhter(){}   // 其他组件想调用地图数据或进行操作   otherOperateMap(){}   // .... }

这么做的目的是可读,方便自己改bug,也方便他人改你的代码,我简单的将methods分为:初始化、功能、对外(其他组件/页面)接口

与其他组件的交互(有争议,欢迎讨论)

从我个人开发经历来讲,这个问题并不好解决,每种交互方式都会带来不同的问题。

这里所说的交互,是与其他组件的通信方式,举例来讲,有一块大屏,中间是地图,周围是图表和其他内容,图表需要调用地图的数据,该如何去传递呢?

实现传输是简单的,问题在于规范的交互传输,目前,我曾使用过以下几种方式:

  1. store 存储变量,通过监听变量进行传递
  2. bus 通信
  3. 其他组件直接调用相对应的方法,地图组件相当于后台接口,反之亦然。 ### 数据处理 在很多场景中,数据并不符合业务的需求,需要进行处理,这时候一定注意代码的逻辑与执行效率。 ### 性能 对于刚入门的同学来说,在开发过程中要注意,每当一个功能或业务逻辑堆叠在项目时,首先注意的是 是否互相影响,其次注意页面运行是否变卡顿了,是前者,那么是出现了bug;是后者,你可以先初步鉴定一下,没有办法解决的话,也要及时做记录,后面如果有提升性能的需求,你也会有好的入手点。

简述

回顾了一下之前写的四节内容,发现并没有给出一个完整的Demo示例,为了方便后面的讲解,这里提供一个简单的模板,同时补充一些在前端框架中,写地图组件的注意事项,也希望你能把自己的经验分享在评论区,共同进步。

示例

html

<div id="map" ></div>

js

mapboxgl.accessToken = "ACCESS_TOKEN";   const map = new mapboxgl.Map({     container: "map", // div的id     style: style, // 'mapbox://styles/mapbox/streets-v11' 可直接用这个地址     center: [116.39104843139647, 39.912287369097186], // 地图加载后默认中心点     zoom: 15, // 地图缩放比例   });   // load 也可以写成style.load   map.on("load", () => {     // 加载图层,注册事件等都需要写在这里面   });

css

#map {   /* 宽高 */   height: 100%;   width: 100%; }

地图组件注意事项(vue)

在日常的开发工作中,项目一般会使用前端框架作为基础,在其上做业务的实现,封装一个地图组件是GIS开发的日常,下面会提供几个注意事项,希望对你有帮助。

绑定数据

不要将map在data中定义,这会导致vue一直监听map的变化,整个地图会变卡,可以选择直接this.map去赋值,也可以在vue对象外定义一个变量存储。

规范代码逻辑

不同于其他前端组件或页面,代码逻辑并不会太多,地图组件稍不注意就有几百行的代码量,如果是vue3,那么直接写在js/ts文件里,vue2也能这么做。

GIS代码用一个一个函数分割开,保证代码的可读性,在methods里,例如:

methods: {   // init   // 初始化地图   initMap(){}   // 初始化图层,在map.on中调用   initLayers(){}   // 初始化地图/图层事件 在map.on中调用   initMapEvents(){}   // function   // 控制图层显隐   hiddenAndShow(){}   // 缩放至某某地方   flyToSomeWhere(){}   // 修改图层数据   editLayer(){}   // web-gis   // 对另外的组件/页面进行操作   operateOhter(){}   // 其他组件想调用地图数据或进行操作   otherOperateMap(){}   // .... }

这么做的目的是可读,方便自己改bug,也方便他人改你的代码,我简单的将methods分为:初始化、功能、对外(其他组件/页面)接口

与其他组件的交互(有争议,欢迎讨论)

从我个人开发经历来讲,这个问题并不好解决,每种交互方式都会带来不同的问题。

这里所说的交互,是与其他组件的通信方式,举例来讲,有一块大屏,中间是地图,周围是图表和其他内容,图表需要调用地图的数据,该如何去传递呢?

实现传输是简单的,问题在于规范的交互传输,目前,我曾使用过以下几种方式:

  1. store 存储变量,通过监听变量进行传递
  2. bus 通信
  3. 其他组件直接调用相对应的方法,地图组件相当于后台接口,反之亦然。 ### 数据处理 在很多场景中,数据并不符合业务的需求,需要进行处理,这时候一定注意代码的逻辑与执行效率。 ### 性能 对于刚入门的同学来说,在开发过程中要注意,每当一个功能或业务逻辑堆叠在项目时,首先注意的是 是否互相影响,其次注意页面运行是否变卡顿了,是前者,那么是出现了bug;是后者,你可以先初步鉴定一下,没有办法解决的话,也要及时做记录,后面如果有提升性能的需求,你也会有好的入手点。

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

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » mapbox-gl | 1.4 完整示例与地图组件的注意事项求职学习资料
分享到: 更多 (0)

评论 抢沙发

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

b2b链

联系我们联系我们