mapbox前端教程

好，我们这一节呢来带着大家做一下视频开头那样的特效啊，像视频开头那种特效呢，经常出现在这个一些啊，防洪防汛自然灾害的项目当中会有啊。 其次呢还有一些比如说一些动态的展示的方面呢，也会用到啊，相对来讲呢是 mapbox 当中一些高阶的操作啊。那么之前跟大家说过，在 box 开发的过程当中，如果你不知道怎么去开发，或者说没有灵感的话，你可以来看一下这个 examples 里面对不对？那我们 examples 里面呢是有很多的案例的啊， 我们这一节呢就选其中的几个案例啊，然后最后呢合成我们这个视频开头的那样的效果啊。首先呢我们要找的案例呢，就是这个叫做 data feature in real time 啊，再再靠下一点的位置啊，好，就是这个案例啊，就是这个案例，这个案例呢，我们可以先来看一下它的效果啊，它效果呢其实跟我们那个已经基本很像了，但是还需要做一些别的修改啊。 啊，这个跟大家说一下这种啊做法的思路啊，这种做法的思路其实呢就是在不断的更新我们的数据啊，我们可以看到它下面这个代码呢，这里有一个关键的方法叫做 set data 啊， set data 这个是用来干嘛的的啊？就是用来不断的设置你的 j o j 三的数据啊，比如说我们看一眼我们的这个河流数据啊，在这里瑞瑞的 gs， 我们的河流数据呢，是一个现状数据，对吧？这个现状数据呢，它是由多个这个坐标点组成的， 然后他的思路呢，其实就是把这个数组呢清空，然后呢不断的往这个数组里面呢添加新的坐标点啊，使用完 我们的铺式方法添加新的坐标点，那你随着时间的流逝，不断的往这个数组里添加新的坐标点，是不是就构成了这条线，越画越长，对吧？就实现了这样一个效果是不是？那明白这个核心原理之后啊，我们就把这段代码呢，直接先拷配到我们的这个 开发的这个 ht 含量当中啊，因为我发现呢，这个带着大家一笔一笔敲这个代码呢，好像效果也不是很好，因为，呃，对于没有开发经验的学生来说呢，好像也看不懂啊，即使我一行一行写，他们也看不懂，所以呢，我们还不如就掌握核心啊，我们把这个代码呢放在我们的这个位置， 这里面呢，我们要删除一些东西啊，首先他这个一步请求数据这一部分我们不要啊，这一部分我们不需要，然后这个随之而来的这个啊 think 呢，我们也不需要了啊，我们就是从这一步开始啊，直接拿到数据时候开始这个渲染，那我们的数据呢，是 revered g s 对不对？那我们就要把这个 revered g s 导入进来 是吧？好，我们导入进来之后呢啊，为了方便替换，也为了以后的这个操作中不出现错误啊，我们直接把这个 data 呢 在这里重新定义一下啊，我们可以这样写， cos 的一个 data 等于 riber， 是吧？我们直接把数据替换掉，然后呢这个我们把这些注视删一删啊，格式调一调，我们这个直接可以启动一下，看一下它这个最初的效果啊，最初的效果 我们可以看到效果是非常差的啊。首先有这么几个因素，首先我们的视角不对啊，我们既然想完成这个视频开头，那样的话，我们必须把这个视角呢设置的稍微贴近地图一点啊，设置成七十 啊，稍微大一点，什么是视角呢啊？我们这个 set p 尺是什么意思啊？是我们的这个地图的倾斜角度啊？你比方说我们看这个例子，这里我们使用这个这种方式来移动地图，这就叫 p 尺，这就叫倾斜角度，对吧？我们倾斜多少度？数值越大呢， 倾斜的越厉害，对吧？所以我们改一下这个 p 尺，这是第一步。其次呢，我们这个缩放层级有点大啊，十四级是相对来说还是比较大，我们稍微改小一点，比如说十一点五，是吧？改一下，然后我们再回来看一下这个效果啊，现在就好很多了，是不是？ 然后呢，这个我们发现这河流走的很快，发现没直接很快就走到头了，那是因为我们的间隔时间太短，对吧？我们在这里才间隔十毫秒，那我们给他调成一百毫秒，是不是这次走的就比较慢了，对吧？这样走的比较慢了。然后接下来呢，我们改一下这个河流的颜色啊，河流他这个是黄色，那我们随便在这个网上找一个可以选颜色的地方啊，你们选择 这个稍微亮一点的颜色啊，可以选择这个，然后我们把这一串颜色代码的复制一下，然后回来呢，拿到我们这个呃，设置样式这一部分啊，把这个 yellow 去掉，然后改成这个啊，因为他这里呢已经设置了这个 line opposite 啊，你可以选择把这个 opposite 留着， 然后这里面呢写 r g b。 那你也可以选择把这个 oppo set 呢删掉啊，里面写这个 r g b a 啊，哪哪种都可以啊，哪种都可以。然后这个线的宽度呢，给它稍微调的宽一点点，是吧？调成六啊，这样我们再来看一下这个 河流的效果啊，这样的基本上这个河流的效果就成型了啊，但是呢，我们可以仔细观察这个河流的头部，好像是这种平整的方的，对吧？这样看起来不是很美观。那我们给他调一下他的这个样式，还可以在这里设置一个 lay out 啊， lay out。 然后呢我们给它呃设置一下它的这个叫做 line cap 啊， line cap， 烂钢 cap， 这个呢可以改改变它这个端点的样式，我们给它设成圆的啊， rand， rand。 然后呢这样的话，我们再看一眼它这个河流就是圆润了很多，是吧？然后这样基本呢我们就完成了这个河流和这个呃移动的这个效果。然后呢，我们还有一些 这个补充的地方，首先我们这个地图没有地形，大家发现没是扁平的，那我们就需要给它加一个地形，是吧？在这个 my box 当中加地形呢，我们在这里可以搜一下啊，在这个 api reference 里面搜一下有个叫关于 turret 的东西啊， t e r r a i n。 这里边有啊，我们看这里哈 stat turret 这个方法，我们用一下这个方法， 他这里直接把视力都给我们写好了，看没？那我们就直接把这段代码拿到，然后呢回到我们的视力里面了啊， 回到我们案例里面的，把它给粘到这个下边吧，粘到这个地方，随便粘一个地方啊，粘到这里，然后呢我们就有了地形了啊，我们再来看一眼， 这，这次呢我们就有了地形了，然后呢这个视频开头好像还有那种雾化的效果，是吧？雾蒙蒙的啊，那我们再给他设置一下雾啊，这里雾的话呢，他这个啊关键词呢是 fog 啊，可以搜一下 fog step fog 啊，这里呢也有这个世界代， 我们就直接拿过来啊，直接拿过来放到也是把它放到我们这个位置啊，跟刚才这个地形的放一起啊，可以放到这个地形的后面啊，放在这里， 然后我们看一下现在的效果啊，现在的效果啊，可以看到他这个雾呢是粉色的，对不对？好像不太符合我们的逻辑啊，那我们就把他这个颜色呢给他改一下，改成这个白色啊，改成白色这样的话，这个雾就呃自然很多了，对吧？改成白色自然很多了， 然后呢我们还有一个问题啊，我们现在这个河流呢，他是这个正常顺着这个，呃河道在走，是吧？河道在走啊，那么走到头呢，他这个动画也随之就停止了啊，我给大家把这个时间改快一点，大家看一下这个效果啊， 把这里呢我们改成这个十啊，还改回来改成十。然后呢我们看一下它的效果啊，他这样走呢，走走走，然后顺着走，走到头之后他就停住了，看到没他就停住了啊，然后我们如果 想循环往复的进行这个动画怎么办啊？那，那我们应该怎么改呢？啊？我们应该回到这里啊，我们看一下他逻辑啊，他在这里判断的是，如果这个呃你添加这个坐标点小于这个数组的长度的话，就执行这个不断往进添加的这个操作是吧？不断的 set 对象是吧？这没问题， 如果某一时刻你这个作为点超过了，或者说等于了这个长度的话，他就把这个 interval 清掉，也就是什么都不执行了啊，这个间这个间隔函数他不执行了，我们肯定不能这样，是不是 当有一天这个爱达到了这个数组的长度时候，我们应该把这个爱重重新制零，是吧？并且把这个数组给清掉，这才是我们的常规逻辑是不是？那我们就要把这一行给注掉啊，把这一行给注掉。然后呢，我们首先第一步呢，把这个 呃数组里面的之前所添加的东西都清掉啊，就是说我们的这个拿到这里啊，我们这个 data 点 fetch， 零点 g， omar 去点 靠单的词呢？全都给他，给一个空数组啊，给一个空数组。第二步呢，是我们要让这个爱呢重新回归于零，是吧？爱重新回归零，这样的话我们就能够做到循环往复了，是不是？我们可以看一下效果啊？他走走走，走到头是吧？然后再回来，然后再接着走走走走走，走到头是吧？然后这样的话我们就没问题了 啊，那么我们再把时间给他改回来啊，改慢一点，改慢一点，这样的话呢，我完成了我们视频开头那样的效果啊，如果你对这个 my box 比较感兴趣的话呢，可以关注我，并且呢在这个评论区或者弹幕上留下你的问题啊，如果我有时间的话呢，会给大家一一作答的啊。那么这一节视频呢，我们就暂时到这里。

microbooks 提供了一个带线的一个样式配置的一个网址，这个在 get hobby 上也有一个开远的一个酷的。 在这个在线网址上可以把将发布的史料图腾 配置一些颜色，或者像宽度啊，其他类的一些填充啊，一些属性，这也能方便。我们有一个相当于一个配图的工具，你看这是打开这个网址默认的，他会 能显示出来这是这是一个 open lip 的一个一个地址，我们可以看到他上面的 图腾，还有一些图腾的样式配置，你比如说我改一个，改一个图腾的业，改一个颜色或者是一些配置，他就会有一个变化。好这个路， 但是在地图上点一些图层也能看到 看到一些图腾的配置，选一下也能选到这个图腾，比如说我们改一下这个年，添加一个自己的一个数据源，比如说我们添加一个在这个 datasous 这个地方点一下，添加一个 x 外队的一个数据员，我们把这个的地址就是发布的一个 syz 的地址复制过来放上去起一个名称，就是 告诉写设置一些缩放级别，我就看着可以看到这上面有一个是有有多加了一条数据源，之后呢再添加一个图层，添加一个图层叫 啊梢子泪影，就是那个创建图腾里面他有多个陶瓷泪影，我们可以把这个图腾加进去，加进去就可以看到这个图腾了。这图腾之后我们也能给他设置一些像颜色呀， 比如说还有一些边线的一个颜色的一个设置，嗯。

方式，我们可不可以在这开发工具里面进行打开呢？也是可以的，我们接着进入这一关，我们可以去安装另一个插件，好吧，那么这个插件叫什么呢？叫 open in， 这个地方他会有提示的，我们写一个 open in default， 应该是 default， 好，我们可以装这一个，这个插件叫 open in default。 bros， 我们把这个插件给他去安装一下，那么大家可以带 vs 扣的就是这一块，这里有个拓展商店里面，在拓展商里面去找到这个插件，然后将其安装一下。 好，那么安装完毕之后，我过一下会带着大家去用的。好吧，这个地方其实已经提示你了，我们可以用按住键盘的 ctrl 加一，也可以直接去看到怎么见面的。好，大家首先完成这一个 插件的安装使用一下，那么我们想在 vs 客户的中直接看到这个界面，大家可以按住键盘的什么呢？ ctrl 加一就可以了， ctrl 加一就可以了，大家可以看到目前他也在什么呢？也在这个什么浏览器里面给我们打开了， 我们直接按住键盘的这个什么康曲加一就可以了，你们按住这个键，康曲加一，我们按一下，大家可以看到整个界面是不是也可以出来啊？那么可以出来的同学，大家可以给我扣个七，好吧，扣个七 那也无所谓，因为我目前已经掌握了两种打开页面的方式，那么第一种我们直接在 vs 扣的里面进行打开，按住键盘的康确一，那么第二种呢？我们 可以怎么着？我们可以直接将这个文件是吧双击给他打开，两种方式都是可以的，大家任选一种方式就可以了。好吧，那我们现在的任务就是怎么着呢？我们需要初始画一个地球， 那么呢出手啊，一个地球之前我们需要怎么呢？需要一些外部文件，就是我们需要一些依赖。用不用我们先是什么替 my boss 来做开发的，对吧？第一一个东西叫什么呢？叫，叫 my boss 来做开发。那我们呢？需要引入什么？引入 map box 的依赖，那么就跟汽车一样，汽车它需要什么去启动呢？需要汽油和柴油，那我们首先需要给汽车去加油，那我们现在一样，我们基 maid boss 开发，我们需要引入它相关的依赖，那么呢这一块 就是他相关的依赖，我直接把这一块给他复制到这里，然后粘贴到这个地方，我现在可以将这个三个依赖包也是发送给大家，我直接发到你的聊天群里面，然后大家获取一下，好吧？获取了之后也是跟我一样把它复制粘贴到这一块。完成这一步的同学 啊，大家首先不要刷屏，好吧，等一下，那么呢我们现在想构建什么呢？构建一个三维的地球，那么这是第一步，我们需要怎么着呢？引入依赖， 那么接着我们来进行第二步工作。第二步我们需要设置一个容器，好吧，我们给他一个 id， 叫什么呢？叫这个叫什么呢？叫 mapper， 就叫麦克。好吧，那么这是第二步，我们需要怎么着呢？去设置容器啊。 那么这个注视的地方，大家不要再跟着我写，就注视，我是为了方便给各位看的，大家只用写什么呢？你们只用写这个这一个模块就可以了，写这个写这个代码就可以了。好吧，这是需要大，大家需要做的。好，那么呢，我们接着写一个什么呢？写到下面，接着来写， 写个四口的标签，写个四口的标签。 好，那我们现在需要去来初始画一个地球，那么第三步咱们怎么呢？叫实力画，第三步叫实力画一个 地图。好，怎么实力化呢？好，首先我们抗舌一下，我们声明一个变量叫信，等于什么呢？等于牛 lv 点信。然后呢，给他一个 id 名， id 文音为 map， 之后我们给他设计一个 map 属性，通过 newlg 点什么呢？点 map fox。 好，我们设计一下他的样式 style， 假设给他一个叫大可的样式，之后我们给他设计一个中心点， sot 为幺幺四， 精度为幺二四，尾度为三零。好吧，好，那么这里设置好之后，我们可以再框设一下，我们设置一下慢盘，慢盘等于什么呢？等于信，点什么呢？点慢盘。 好，那么写到这里面，我们这个地球已经构建成功了，那么这个地方我解释一下这一块，首先我们通过偶尔器构建了什么呢？构建了一个场景， 这一步是叫什么呢？通过 lt 构建场景， 那么呢这个我们需要把这个场景放在哪里呢？放在这个麦克容器之上，这 id 四，我们需要将这个场景放在麦克容器之上。那么这个场景是通过什么呢？通过一个 my boss 的地图来构建的，那么这个 style 是什么意思呢？ style 是 这个时代的意思，就是加载的图层，或者说加载的样式。那么这个深的是什么呢？深的就是我们这个地图的中心点，是吧？我们 设置地图的中心点。好，那么这个地方我 我要给大家说一下，就说我们做这个三位开发，其实他大多数的框架都是基于什么呢？基于加斯库的，那么各位可能之前的时候很多同学没有加斯库尔的基础，可能看到这一块 你都不知道这写的是什么，那么我还是说亲切的课程，它就是一个简单的三维的入门的课程， 那么呢，你们如果是想去补加二十块的知识，可以自己去补，你们今天只需要跟着我照葫芦画瓢，把东西写出来有一个概念就可以了。好吧，那目前我们去页面上去查看一下，看这个三维的地球有没有出来。好，这边需要去加载一下啊，大家可以看到， 那么这个地方是不是已经简单的出来了一个界面了？好，这一步能够出来的同学，大家可以给我什么呢？ 在这个聊天栏里面给我扣个扣个六六六。好吧，六六六，终于有东西看了啊，那么接着我们来说这一块，我们现在我们现在这个球形，这个地球是不是啊？他是一个这种 叫什么，这种平面的对不对？我们将其想将其变成三位了，并其实大家仔细看的情况下，这里会有一个什么，是不是有一个白边呢？还有个滚动条，我们现在要把这个问题去做解决吗？ 那么现在可能需要写一些简单的 css 的样式啊，大家可能这个样式也不知道是什么意思，你们直接跟着我写就可以了。好吧， 只用你只用照着我的胡弄，是吧？去画瓢，你画出来就可以了，因为这个地方我们如果是需要去讲这个 cs 的情况下，这个地方是会非常的冗长，因为我们是基于什么呢？其实基于 hmcs 加是亏本的基础上，我们再来去做这个三维开挖，然后呢我们给他一个卖本，给他一个样式，你说不对劲，你说给他一个叫什么呢？ ap solute， 然后呢给他一个 top 值为您，那么呢接着给他一个 boss 为您， 然后关注设一下关注，给他设成什么呢？设成百分之百。好，那么这里设置完毕之后，我们去页面上再去看刷新， 那么大家可以看到他的白边目前怎么着是不是就消失了？目前他给我们的铺满的就是整个球面，对吧？整个容器，但是呢我们需要让他变成什么呢？变成一个地图 地球，那么怎么着呢？可以到下面去加一个，怎么呢？加一个参数叫什么呢？叫 pro 加个星， pro 加个星，然后呢？昂起射 设置为什么呢？设置为阁楼堡就可以了，阁楼堡叫什么？阁楼堡就是球体的意思。 好，我们现在再去页面上去刷新，那么我们可以看一下，大家可以看到目前就变成什么了，变成一个三维的地球了，对吧？好，大家首先里面实现到了这一个模块，好吧， 我们接着来说，那么下面这一块我们现在已经进入这个进入这个页面了，那我们现在可以使用在线的代码平台去来实现，那么我们看一下我们刚才的这个在线的代码平台， 我们就用这一个，那么呢大家可以进入这个战友们在线的代表平台，这一块有一个什么呢？有一个新建，我们点击这个新建，那么他会进入什么呢？进入这个 htm 页面，对不对？进入这个 htm 页面，我们可以 将刚才的代码就这一诊断，我们直接怎么了？考虑 c 复制。然后呢到这一块我们到这里面去粘贴， 大家可以看到啊，那么这一块他会有个叫什么格式化，我们点击下这个格式化，大家可以看到，那么这个地球是不是也是可以出来了？ 好，出来之后那么这一块有个什么呢？有一个保存，大家可以将其保存一下，保存之后那么这里会生成一个随机的质量，其实大家还可以到这里去写个命名。继续说我们今天写的第一个例子叫什么？叫 初始发地球，对吧？初始发地球，好，我们点击再点击保存一下，那么就可以了，进行这个链接，大家可以看到这个链接，其实现在其他人也是可以打开的， 你说大家想看我的代码也是可以的，你们直接通过这个地方，你们就可以看到我的代码，同时呢能够看到我显示的这个效果。好，我发给大家，没实验同学，大家可以照着我的代码把这个地方抄出来，好吧， 好，发送给你们。好，大家用这个在在线的代码平台去试一下啊，直接将我的代码抄在这里面就可以了。好吧，抄了这一块，这一块是代码，这一块是显示的效果。 好，大家试一下这个地球其实他没背景，是不是他非常的简陋，那我们现在需要去给他加一些背景，好吧，那么呢我们可以写一些代码，你说给他一个 map， 给他一个监听，那么监听什么呢？监听他的一些样式的 加载，给他监禁这个 style 点什么呢？点漏的，加载完毕之后我们来给他去设置一些钥匙，我们直接就在这里面，在这里面写就可以了。好吧， 然后我们给 map 设置什么呢？设置一些效果，就设置一下他的大气层的效果，好吧，然后写个报告， 好保存一下，那么大家可以看到目前他会就会应该是会出来一个效果呢。啊，稍等一下，保存一下，好，加载 外婆往 style 点漏的，然后呢？ set fort 这一块怎么出来啊？ 好，去空台中看一下，好吧，好，出不来，我就到 vs 扣的里面去写一下，看什么这边这边套到这里，这一块出不来，然后我们到这里面写个麦克风，叫什么呢？ style 点漏的， 然后呢？我们执行个毁掉啊，执行一个到这一块我们去执行毁掉我们啊 map 点 sector fog， 好抗拒一，我们去页面上来查看一下，看现在能不能成功的出来， 是一个白板。好，大家可以看到目前这个地球他已经有一个什么，有一个这个星空的这个加载的效果了，他总体的效果还是比较好的。那么这一块在线的这个在吗平台他为什么出不来？ 这个代码其实写的是一样的，那么出不来，可能是啊，这一块是因为这里面的问题，我应该是写成什么？写成一个回调的形式。 好，那么现在应该好了，大家可以看到，那么在吗在线的在吗平台他也有了这个效果呢？其实我们最好还在本地写，就本这个在线的他其实没有提示，好吧，没去对应的歧视，我还是在本地写，好吧，没有构建好的同学还是到本地去构建，因为这个在在线的在吗？平台写的还是有点坑，他一点提示都没有 好到这一块来写，那么下面他会有些属性，你说这里有个多了的属性，好吧，我给他一个颜色，你说我给他一个红色，应该是可以直接设这个字段的，我们到页面上去刷新一下啊，去刷新一下，好，看，他会实现一个什么样的东西， 好，大家看。哎，这个地方就感觉有有点亮眼了，是不是？是非常辣眼睛，就是这个地方我们其实这个颜色他设置了什么呢？是设置的大气层的颜色，好吧，这颜色是就说设置 大气层的颜色，对吧？那么呢，之后他还有其他的一个场所，好，我们给大家洗了吧，你们可以去测试一下。那么呢，还一个叫什么啊？嗨，耐好了， 其实通过这个名字你就应该能够叫出来，他应该是设置什么呢？设置一个高峰的颜色，好吧，我们来测试一下。你说我给他一个其他颜色，好，这个地方给他就给一个亮眼的颜色，给一个很辣你们眼睛的颜色，因为我这个地方也是陈轩这个审美也就这样子，好吧，原谅一下，我的这个审美， 可能有点辣你们的眼睛，对吧？好，这个地方大家可以看到那么高空的颜色，它就是什么一个蓝色，可能这一块不是特别灵，明显，我将它变成一个什么呢？变成一个黄色，好吧，变成一个黄色， 好，是不是有点辣眼睛呢？对吧？这是一个高峰的这个颜色哦，感觉这个眼睛稍微有点晃。好，那么接着就是这最外面呢，就是星空的颜色，也可以去做设置的。那我们来写，那么它这一块叫什么呢？ 那么马斯克纳公司叫什么？是不是叫 sbx？ 那么这一块它的颜色叫什么呢？叫斯佩斯卡拉，星空的颜。

正在看 maypropox 的英文接口开发文档来进行备课。 接口里面有关于 map 的，有关于属性和 ops 的，有关于 max 的。 然后这些这些英文文档我要翻译成中文，制作成自己的。嗯，讲课的课件，然后手把手的传授给同学。 有想学前端开发工程师的可以来私信我。感谢大家的关注和支持。

那么除了抚养角之外，大家可以看到我们按住鼠标的右键，左右在旋转这个地图的时候，这个地图是不是可以去做旋转了？ 相当于沿着水平面在转吗？这个角度叫水平角，那我们可不可以设置水平角呢？是可以设置的，我们也可以去测试水平角，那我们来测试一下吧。零四水平角的测试，直接到这一块给他复制，然后呢粘贴过来就可以了，水平角这个参数叫变硬，我们给他个零， 这块直接看是看不出来的。那我们用四件来测这一块，应该给它改一下 girt b a in， 我们按这个值也是做一个累加好了，加等于十， 每次加速之后把这个纸给他设置进去 set 眼影，对死，把这个 party 也给他调一下，调整个九十度，好，来测试，好吧，好，我们刷新是不是可以看出来，可以吧？好，那么这里面我们获取他这个对应的纸啊， 给它去加，哦，这里改一下，改成 r e s， 我们点一下是不断在做旋转了，对吧？水平角测出来了吧？ map boss， 它有两个角度，第一个叫俯仰角，就上下，第二个水平角左右，好吧。

map x 账号注册教程，不了解的可以留言或私信。科技加持下，打开 map x 官方网站，点击右上的 signap， 进入账号注册界面，依次输入 map x 注册所需的姓名、 邮箱用户名、密码。注意邮箱需要是国外邮箱。加速中 勾上下面方框里的勾，可以看到 create com 已经油灰变蓝，点击并耐心等待 弹出信用卡输入界面，输入信用卡的卡号有效期和 c v c， 点击可以 a t 看，点击后 mapbox 官方会自动进行信用卡验资，若使用虚假信用卡则无法完成当前步骤。 成功发送验证邮件，切换到邮箱，这时发现已经收到验证邮件了，点击验证邮件，点击 verifi my 已没有耐心等待 出现这个弹窗就是注册好了，叉掉就可以 进入登录成功界面，点击右上角头像显示的名称就是账号的用户名，点击 create eight time mappings through the o 试试。耐心等待 成功进入 map 阿克斯鲁对欧界面，点击 ok， 点击 news air， 随便创建一个风格，加速中 成功进入且可以正常使用。此视频由淘宝店铺苟子小铺制作，有意见建议可以留言或者私信我们，下期见！

nine parks 四步调欧三 d 立体感文字标签教学狗子小铺制作 登录成功后， mark box 界面，点击左上方 create a muffinstitute， 耐心等待。进入 mark box studio 界面，点击 newstyle， 选择经典模板 cs tempon， 选择卫星街道 satellites eight， 耐心等待。 这次以香港大东山为例，点击右上角放大镜，输入香港森塞，选中香港大东山， 跳转至大东山，点击的位置就是大东山的标签点。现在把弟媳 从二 d 变为三 d， 点击左上角 gover， 选中三 d to a， 把 enable to a 功能的 off 变为 r。 此时可以看到地形已经发生变化。 现在给大东山标签点添加立体文字注视，点击雷日子，点击蓝色的加号， 选择数据可视化 data 为全网的 zation， 点击 sars 数据源，选择 apple x 的一，所以八下的呢，全网 label 不要感到惊慌，现在虽是一片红，但好戏即将开场， 我们会在下一步进行调整。点击选择数据可视化类型， c l x data 为主，有了 z 生 taip 选择标， 标签 symbol， 把 common homony pro， oppotic 和 labor 所引用的数据都选成 name。 现在大东山的标签正常了。为了获得更多功能，右键左侧列表新建的图层，选择弹出式样式组件， your jacket's ilcome pony 可以看到弹出了内容 tax 符号 icom 等功能，但是文字太小了，看不清。点击赛域，把尺寸调到三十个像素。这时候可以发现因为文字较大的原因， 其他标签把屏幕堆满了。我们要想办法在保留地图全景的情况下去除其他标签。通过筛选高层删除不需要的标签，删除 tax fire 中的内 insert data few， 顶入 elevation name， 点击 text fear， 选择在 wood data condition， 选择 alleviation m， 这时候可以看到大东山变成了八百六十九， 意思是大东山高长为八百六十九米。点击下方 cio 的一套 condition， 选择 alleviation m， 这个时候输入高成八百六十九， 并调整 text file， 输出 name， 编辑 flow back value。 删除原来的 l o v 身的 m。 英文输入法下输入双引号，这样可以表达文本。可以看到除了大东山外，其他的标签已经不见了，这里输入一，可以看到其他标签变成了一。 接下来调整阿 com 也是类似的步骤，同样按照高层筛选。 设置成功后可以看到除了大东山，其他大标签完全不见了。我们调整 整一下文字的颜色， 这里需要上传一个白色的竖线作为分格服务。点击 adore remover motches， 点击 apple the motches， 并选中事先准备好的粗捆件。 如果没有所有的创作经验，可以在 ico 方向下载。 注册后登录搜索框输入竖线，然后选一个喜欢的下载即可。现在回到 mapox 选 选择 confirm， 这个时候四位已经成功上传了，但由于竖线太细，在选择界面看不到，可以在我这个位置选取。 选取成功后，地图并没有看到竖线，这是因为 map box 存在 bug， 刷新网页就会出现了。 现在竖线已经出现了。我们现在调整位置， 可以看到第二个 tax emk 和第三个 tax of city 并不能选择，这是因为下面已经提前设置了格式，删除就好了。 这个时候可以看到我们之前加入的竖线像是载图里一样，现在先把它往上提提，调整 icon offset 外置，直到竖线位于合适位置， 这样就挺合适的。 接下来调整 text tofsite 也是一样的方法， 这样就差不多了。 现在我们对着创建好的图层点右键，选择 dupal kit through action， 复制一个新的图层，并且修改复制前图层的名字，加以区分。 删除新复制图层的 icon， 将其修改为 n。 发现原来图层的竖线也看不到了，这是由于两个图层重叠导致的。 点击 place 们将其中的允许文本重叠 air tax overlap 和允许图标重叠 air icon overlap 都设置为 to， 另外一个图层也同步设置， 这时候可以看到失去的竖线回来了。 编辑新图层的内容，描述大东山的高度，即删除原 text fill 的内容，修改为大东山高图词评论 l v 山 m 米， 这样可以自动显示高度。同样调整文字位置到合适的位置，并调整文字大小， 这样就差不多了。接下来就是复制并修改多个图层，让标签的内容更加丰富。加速中 设置好了，请看成品。其实文字大小颜色什么的还可以再修改一下，但是时间原因就简单示范一下。此视频由狗子小布制作， 制作不易，还请多多支持。有意见建议可以留言或者私信我们，下期见！

mapbox 的重要性这里就不强调了，有同学说又不能注册了，大家看好日期，我给大家演示下。打开 proton mayor 注册个账号，注意需要全局魔法分亚洲节点，这里一步一步暂停看下即可。要绑定手机号就跳过 回到 mapbox 主页，点击注册，选择个人使用，直接创建账户即可。这里会让验证邮箱，打开邮箱验证就行，没有其他的操作。很多同学卡在了这一步。这个是不需要实际输入的， postal code， 需要严谨看我输入一样的就行，然后就可以正常使用了。需要预设样式的同学也可以看下我其他教程，三连获取即可。

给经常使用 g i s 相关软件的同学演示下绿色资源在实操过程中的应用，载入我发的样式后点击分享。 third party 复制链接 g i s pro 插入链接服务器里的 ones 服务器，直接粘贴后确定 在目录里找到并拖入进来。其他底图同理可得卫星图可以用 siri 里的，也可以用 wamps 的，之前分享过好几期，可以往上翻，调整好的样式也是可以在 g i s pro 里调整图层混合模式的， 这也是为啥我调了这么多不同的样式的原因，都是带坐标的，所以是直接可以完美对上的，追求效率要求不高的项目可以直接用，不会创建布局的同学给大家再演示 下。选择纸张后地图框，选择视图后直接框选。导出是共享里的导出布局，选择格式后直接导出，导出前记得调整下左下角比例，或者在布局上右键激活下试图确定好导出范围。 其他的都是同理导出的，只需要单独显示需要导出的图纸即可。这些图纸拖入 ps 都是直接对齐的，不需要另外放大缩小对位置什么的， 调整下底图加加蒙版什么的，就可以做出来一份不错的区位分析图啦。现在显示的这种图纸大家需要吗？需要的话在评论区或者弹幕扣一我来逐步解析下，最后欢迎大家的持续关注哦！

大家好，我是新中地的王老师，现在由我来给大家介绍一下本次校企合作实训项目的最终作品。整个作品分为三个部分，第一个大屏可视化， 第二个整个地理数据的范围查询，地图测量，飞行控制中心以及自转，这是主要功能模块。第三部分是常见的工具栏，全屏展示，地图图层切换以及皮肤切换，极速缩放， 我们现在来演示一下主要功能，我们可以控制整个地球的自转与停止自转。 我们可以控制整个大屏的显示与隐藏。 我们可以将视角飞行至武汉，观察整个武汉的城市面貌， 我们可以看到整个城市是带有放光的效果以及他交通流线的效果。 我们可以对整个地图进行一个范围查询，以此来获取到当前的事故情况。 可以看到我拉框的矩形范围内查到出查出了一个事故，我们可以定位置事故的坐标点， 我们可以点击相 请查看事故的具体原因。 地理范围查询支持多边形查询，矩形查询以及圆形查询。现在我们来一一尝试一下， 点击最后方，最下最后方的按钮，可以删除当前的查询信息。 整个系统支持地图的测量功能，目前测量功能支持四种多边形的范围查询，矩形的范围测量，圆形的范围测量以及距离测量。现在我们来一一尝试一下， 点击最后方的删除按钮，也可以删除当前测量 了结果。 最后来介绍一下整个系统的小空间，右下方的是极速的缩放，点击加号我们可以看到更加详细的信息。 n 加精细的极度极速 点击减号，我们可以从更加俯瞰的视角去观察整个效果。 右上角是我们切换图层的空间，我们可以选择是否显示整个武汉市的建筑或者是道路， 我们可以看到建筑没有了，看到道路也没有了。 上方是一个皮肤切换功能，我们可以控制是否显示亮暗标准三种皮肤， 然后是一个全屏展示的功能。 最后我来介绍一下本次项目所使用的技术站，本次项目前端使用的乌油三框架，加上 mock 数据， mock server c s s 编写整体的大屏可视化样式， my books 展示 是三维地理数据。 l 七美化整个城市的建模效果以及道路流线效果。 最后来说一说整个项目的可扩展性， 大家可以想象一下，嗯，不只是智慧城市武汉，其实智慧城市成都只要里奥数据一样是可以做的。 由于整个数据来源是从网上获取到的数据，所以说只要你获取到的数据，你可以，嗯，做到任何，做，做到任何一个智慧城市，甚至你不做城市。你做一个智慧校园，比较小的范围，你只需要加载对应的模型就可以变把这个项目变为智慧城市校 校园，同样他也可以去做查询，比如说你校园里面呃，产生的 一个学生上课的情况啊，你只要拿到了数据，你一样是可以对它进行一个拉框查询的。 好了，整个项目演示到此结束。