把鸽鸽放到地图上唱跳rap篮球需要几步？

事情的起因

最近在做地图类的创意应用没什么灵感，有一天晚上看到我弟弟玩游戏，发现机箱里有个ikun手办，这创作灵感就来了，鸽鸽+唱歌跳舞有没有搞头？

说做就做，WebStorm启动

1.初始化地图

这里的地图框架我用的是Mapmost SDK for WebGL,代码和效果如下

官网地址：www.mapmost.com

js 复制代码

<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.3.0/mapmost-webgl-min.js"></script>
<script>
  let map = new mapmost.Map({
      container: 'map',
      style: 'https://www.mapmost.com/cdn/styles/sample_data.json',
      center: [120.71330725753552, 31.29683781822105],
      zoom: 16, 
      userId: '*******************', //填入你自的授权码
      pitch: 60,
      bearing: 75,
      sky:"light",
      env3D:{
        exposure:0.3,
        defaultLights: true,
        envMap: "./yun.hdr",
      }
    });
</script>

2.设置地图样式

这里为了和模型本身的颜色契合,我隐藏了一些图层，然后把水系、道路、和陆地的颜色改了，代码和效果如下

js 复制代码

 //更改背景、水系、道路配色
 map.setPaintProperty('bacground', 'background-color', 'rgb(159, 208, 137)')
 map.setPaintProperty('ground_grass2', 'fill-color', 'rgb(103, 173, 144)')
 map.setPaintProperty('water_big', 'fill-color', 'rgb(106, 190, 190)')
 map.setPaintProperty('water_samll', 'fill-color', '#ADDCDF')
 map.setPaintProperty('road_city_polygon-tex', 'fill-color', '#F1ECCC')
 map.setPaintProperty('ground_playground', 'fill-color', '#FBD9E1')

//隐藏道路名
 map.setLayoutProperty('road_metroline_line','visibility','none')
 map.setLayoutProperty('road_metro_line', 'visibility', 'none')
 map.setLayoutProperty('road_metroline_name', 'visibility', 'none')
 map.setLayoutProperty('road_metro_name', 'visibility', 'none')
 map.setLayoutProperty('road_city_name', 'visibility', 'none')
 map.setLayoutProperty('road_country_name', 'visibility', 'none')
 map.setLayoutProperty('road_others_name', 'visibility', 'none')

3.加载模型和图标

然后从网上下载了鸽鸽的obj模型

直接加载上去,这里作为模型图层添加,用法参考下面的文档：

www.mapmost.com/mapmost_doc...

js 复制代码

 //定义模型对象
let models_obj = [{
  type: 'obj',
  url: "./XHJ.obj",
  mtl: "./XHJ.mtl",
}]

//配置模型图层参数
 let options = {
   id: 'model_id',
   type: 'model',
   models: models_obj,
   center: [120.71482081366986, 31.299511106127838, 145],
   callback: function (group, layer) {
   }
 };
 
 //添加图层
 map.addLayer(options);

鸽鸽就这样水灵灵的出现了

然后我们加几个图标上去，这里利用geojson数据，添加的自定义图层

js 复制代码

//增加ikun图标
map.addSource("ikun", {
  "type": "geojson",
  "data": "./ikun.geojson"
})
map.loadImage('./111.png',  (error, image) => {
  if (error) {
    throw error;
  }
  map.addImage('icon', image)
  map.addLayer({
    "id": "icon_ikun",
    "type": "symbol",
    "source": "ikun",
    "layout": {
      "icon-image": "icon",
      "icon-size": 0.15,
      "visibility": "visible"
    }
  })
})

好了，大功告成了

后续：如何实现唱跳rap篮球？

当然只看模型肯定不行，主要得让鸽鸽动起来，唱、跳、rap、篮球一样不能少怎么办，MasterGO启动, 急的我UI和交互都给一起做了，不会UI设计的开发不是好前端。

后面越想功能越多，干脆搞个小游戏算了，游戏名字我都想好了，叫：唤醒鸽鸽，输入不同的口令，激活鸽鸽不一样的动作,伴随着地图一起舞动。

但是开发遇到了点困难，手机和模型材质的适配还在解决中....，另外模型骨骼动画有点僵硬，这个等我解决了再给大家分享,目前的效果还比较粗糙：

如果大家想到什么好玩的功能，也可以评论区讨论一下，不过一定要与地图结合才好玩。

关于代码：源码地址在这

基础场景的代码我先发给大家：链接: pan.baidu.com/s/1G-r5qIXN... 提取码: y1p5

完整的代码等我解决掉bug了再分享