vue 地图可视化 maptalks 篇实例代码详解

网络编程 2024/12/29 佚名

3 2 1

圆月山庄资源网 Design By www.vgjia.com

Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发： - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了

上面是一段 maptalks 官方介绍，下面来创建工程。首先利用 vue-cli3 搭建一个 SPA 项目，然后写一段 maptalks 的 HELLO WORLD。如果对 vue 项目的创建比较熟悉，可以跳过步骤一，直接看步骤二。

一、创建工程

vue create vue-maptalks

进入工程配置页面

选择 Manually select features

选择 Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter

输入 n

选择 sass/scss

选择 ESLint + Airbnb config

选择 Lint on save

选择 In dedicated config files

输入 y，保存本次设置为模版，下次创建项目直接选择本次保留的模板。

输入保存的模板名字，进入项目初始化构建，等待构建完成。

完成后，打开浏览，输入 http://localhost:8080/

工程创建完成。

二、HELLO WORLD

安装 maptalks

yarn add maptalks

删除 src/App.vue，新建 App.vue，输入如下代码

<template>
 <div id="map" class="container"></div>
</template>
<script>
import 'maptalks/dist/maptalks.css';
import * as maptalks from 'maptalks';
export default {
 mounted() {
  this.$nextTick(() => {
   const map = new maptalks.Map('map', {
    center: [-0.113049, 51.498568],
    zoom: 14,
    baseLayer: new maptalks.TileLayer('base', {
     urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
     subdomains: ['a', 'b', 'c', 'd'],
     attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
    }),
   });
   console.log('map: ', map);
  });
 },
};
</script>
<style lang="scss">
html,body{ margin:0px;height:100%;width:100%; }
.container{ width:100%;height:100% }
</style>

效果如下：

总结

以上所述是小编给大家介绍的vue 地图可视化 maptalks 篇实例代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue,地图可视化,vue,maptalks

标签：

vue,地图可视化,vue,maptalks

圆月山庄资源网 Design By www.vgjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

圆月山庄资源网 Design By www.vgjia.com

评论“vue 地图可视化 maptalks 篇实例代码详解”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

vue 地图可视化 maptalks 篇实例代码详解

vue,地图可视化,vue,maptalks

基于nodejs的微信JS-SDK简单应用实现

vue 中使用 watch 出现了如下的报错的原因分析

评论“vue 地图可视化 maptalks 篇实例代码详解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接