【超实用工具】完蛋，我被好看的地图包围了！！！

清风夜半
VIP.4 融会贯通
2,456 阅读4分钟

Snipaste_2024-04-09_11-09-40.jpg

前言

一切要从我上个月的那篇文章说起，从那以后便招来了一些极其不合理但又无法原谅的的需求

“一天完成一个系统开发”、

“3小时出一个demo（还要有UI设计）”、

“30分钟准备一个项目演示PPT”

"15分钟后看下效果ok吗？"

image.png

详情可以参考我之前的文章《原来科技感的三维地图可以这么简单实现》

事情的起因

这还得从愚人节说起

突如其来的需求

2024-04-01

4月1号早上打开手机忽然看到微信里发来了消息

1712625171141.png

简直分秒必争啊，简直了，我*！

急匆匆的我

2024-04-01 09:10

一时不知道该怎么办，很急，但理智告诉我先别急，先问问GPT把景点数据搞过来

image.png

[
  {
    "name": "中山陵",
    "position": {
      "latitude": 32.0683,
      "longitude": 118.8322
    }
  },
  {
    "name": "明孝陵",
    "position": {
      "latitude": 32.0507,
      "longitude": 118.8595
    }
  },
  {
    "name": "夫子庙",
    "position": {
      "latitude": 32.0227,
      "longitude": 118.7956
    }
  },
  {
    "name": "总统府",
    "position": {
      "latitude": 32.0436,
      "longitude": 118.7787
    }
  },
  {
    "name": "南京博物院",
    "position": {
      "latitude": 32.0232,
      "longitude": 118.7882
    }
  },
  {
    "name": "钟山风景名胜区",
    "position": {
      "latitude": 32.0862,
      "longitude": 118.7679
    }
  },
  {
    "name": "雨花台风景名胜区",
    "position": {
      "latitude": 31.9876,
      "longitude": 118.7823
    }
  },
  {
    "name": "南京城墙",
    "position": {
      "latitude": 32.0465,
      "longitude": 118.7946
    }
  },
  {
    "name": "瞻园",
    "position": {
      "latitude": 32.0257,
      "longitude": 118.7911
    }
  },
  {
    "name": "江宁织造博物馆",
    "position": {
      "latitude": 31.9442,
      "longitude": 118.8442
    }
  }
]

差不多了，先搞这么多吧

2024-04-01 09:20

景点数据有了，地图怎么办，先找找 高德 和 百度 的地图API试试看

emmm,太商业化了，没一点旅游的味道,勉强能看，但写代码肯定来不及，再找找别的看吧

image.png

image.png

打开新大陆

2024-04-01 09:25

忽然想到上篇文章里用到的 Mapmost，之前看到他们有个叫 Alpha 的低代码平台，一直没试过，不知道能不能用，先打开看看再说

image.png

emmmm,感觉空空的，有点失落

image.png

瞄了几眼帮助与示例里面的教程，感觉使用并不难，直接开搞吧

image.png

2024-04-01 09:30

先创建一个应用试试

image.png

点进去，发现左边一列竟然有全国的地图数据，有点小惊喜啊！

image.png

尝试了搜一下南京的地图，发现各个区都有

image.png

image.png

随便拖个玄武区看看效果，啊这，感觉平平无奇，还没高德地图好看

image.png

超多好看的地图

本想着其他家的低代码平台看看效果，然后当我打开地图特效的时候，感觉立马爱上了

竟然有这么多样式可以选择！！！关键是不用写代码，拖一下就行了，perfect+1

image.png

image.png

挨个切换特效试试看咋样 image.png

  • 暮云粉 image.png

  • 青瓷蓝 image.png

  • 暗影绿 image.png

  • 翠翠绿 image.png

等等等...,看了一下，一共 20种地图样式，这下肯定能满足需求了

先用这个叫暮云粉的来一版试试吧

开始做demo交差

景点数据和地图都有了，开始把点位上图，不有又发现了一个问题，这地图只能加载一个区，没法显示南京市的，这就有点美中不足了，不能直接加载全南京市或者全国地图。

等等，全国？刚刚好像漏了什么东西，是啊，全国啊！！！！

image.png

返回场景底板列表看看，还真有全国的地图，真是想什么来什么啊，拖进去看看，还真能加载

搜一下南京市，定位过去

image.png

这下齐了，所有的区都在了，先把景点数据加上去

image.png

等一下，刚刚是不是可以搜索？那还加数据干嘛，直接搜索景点不就能定位了？

image.png

更重要的是，地图上已经有景点的数据了，也不用自己加

image.png

我直接标个点就完事了，找到图形标绘工具，加个旅游景点的图标

设置一下标题、图标大小、文字大小、颜色属性

感觉比做ppt还简单啊

image.png

image.png

同样的方式，把其他景点的图标加上去

image.png image.png image.png

image.png

2024-04-01 10:15

搞了几个点，差不多了，先看看效果咋样

保存，发布

image.png

image.png

image.png

然后回到工作台，看看已经发布的应用

image.png

image.png

啊哈哈哈哈，完美，拿去交差

1712630400041.png

补齐 demo 的 UI

突然发现忘了一件事，没加UI

再打开应用编辑器，找到面板，我就知道可以在线设计UI

加上标题和一些地图组件，设置一下样式

image.png

然后再看看效果，有那味了，就先这样吧，后面有时间再自己设计UI

image.png

小小的总结

先不说这个叫 Mapmost Alpha 的平台功能如何，就冲它里面有那么多地图资源，还有好看的样式，就值得案例给大家，平时用来应个急，快速出个效果还是可以的。

地图资源、模型资源、图标资源

image.png

image.png

image.png

至于在线编辑功能，就仁者见仁智者见智吧，方便了那些不会写代码的用户，至于开发者，我相信大多数还是会用SDK开发

目前这个平台可以免费试用，大家可以去白嫖一段时间试试看，也算是个小小的工具福利吧

image.png

avatar
文章
阅读
粉丝