脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 地图可视化 maptalks

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

 更新时间：2019年05月21日 08:53:48   作者：lifefriend_007  
这篇文章主要介绍了vue 地图可视化 maptalks 篇，本文分步骤通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

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中使用stylus报错的解决

    Vue中使用stylus报错的解决

    如果你也和我一样，按照正常的流程下载并且配置了stylus，但是依旧报错，也许这篇文章就是你的菜，一起来看看吧
    2022-08-08
  • Elementui按钮设置默认选中状态的实现过程

    Elementui按钮设置默认选中状态的实现过程

    这篇文章主要给大家介绍了关于Elementui按钮设置默认选中状态的实现过程,文中通过图文以及示例代码介绍的非常详细,对大家学习或者使用Elementui具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • vue实现鼠标悬浮框效果

    vue实现鼠标悬浮框效果

    这篇文章主要为大家详细介绍了vue实现鼠标悬浮框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3+Element采用递归调用封装导航栏实现

    vue3+Element采用递归调用封装导航栏实现

    本文主要介绍了vue3+Element采用递归调用封装导航栏，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • VuePress使用Algolia实现全文搜索

    VuePress使用Algolia实现全文搜索

    这篇文章主要为大家介绍了VuePress使用Algolia实现全文搜索示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • Vue3状态管理的使用详解

    Vue3状态管理的使用详解

    这篇文章主要介绍了Vue3状态管理的使用详解，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-04-04
  • Vue3-新特性defineOptions和defineModel示例详解

    Vue3-新特性defineOptions和defineModel示例详解

    在Vue3.3中新引入了defineOptions宏主要是用来定义Option API的选项,可以用defineOptions定义任意的选项,props、emits、expose、slots除外,本文给大家介绍Vue3-新特性defineOptions和defineModel,感兴趣的朋友一起看看吧
    2023-11-11
  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    下面小编就为大家带来一篇Vue.js项目模板搭建图文教程。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue中v-for更新检测的操作方法

    Vue中v-for更新检测的操作方法

    v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。今天通过本文给大家介绍Vue中v-for更新检测的操作方法，感兴趣的朋友一起看看吧
    2021-10-10
  • 浅析Vue3中Excel下载模板并导入数据功能的实现

    浅析Vue3中Excel下载模板并导入数据功能的实现

    这篇文章主要为大家详细介绍了Vue3中的Excel数据管理,即下载模板并导入数据功能的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
    2024-05-05

最新评论