Vue项目嵌入天地图专题一：加载天地图

公司近期的项目有用到天地图，之前接触过百度地图没有接触过天地图。所以根据项目的要求写一个专题来记录下

1.我们用的是南京天地图，首先是引入天地图所需的各种文件,因为我们的项目是vue的项目所以，引入的这些文件我放到了public目录下的html文件里。如图：

2.引入天地图所需文件，这样我们就可以在项目中使用天地吐了

3.加载一个基本的天地图，在methods中新建方法，输入token,定义地图初始化参数，和底图、注记.

<template><div class="contant"  id="map" style="z-index:1"></div>
</template><script>export default {name: "testJwds.vue",data() {return {map:{}}},methods:{init(){GeoGlobe.customToken = "";var _this = this//地图初始化参数let map = new GeoGlobe.Map({container: 'map', //绑定容器showLogo:false,mapCRS: '4490', //定义坐标系zoom: 11, //当前缩放级别center: [118.778,32.043], //定位中心点pitchWithRotate: false,//禁止45度倾斜dragRotate: false,maxZoom: 17, //最大缩放级别minZoom: 11, //最小缩放级别areaId:'',//区IDstreetId:'',//街道ID});map.on("load",function () {// 加载南京大屏版矢量地图var dt_layer = new GeoGlobe.NJLayer("esri_vec_dt_controlcabin");map.loadSprite(dt_layer.sprite);map.style.setGlyphs(dt_layer.glyphs);map.addLayer(dt_layer);// 加载南京大屏版矢量注记var zj_layer = new GeoGlobe.NJLayer("esri_vec_zj_controlcabin");map.loadSprite(zj_layer.sprite);map.style.setGlyphs(zj_layer.glyphs);map.addLayer(zj_layer);}.bind(this))this.map = map;}},mounted(){this.init()}}
</script><style scoped></style>

4.加载底图成功。

Vue项目嵌入天地图专题一：加载天地图相关推荐

vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
vue项目结构及启动文件加载过程分析
vue项目结构及启动文件加载过程分析一.vue项目结构 1.导入项目准备好开发工具Visual Studio Code,导入生成的项目案例.我的Vue版本: 2.项目目录及文件说明 2.1.项目主 ...
GIS初学者，最新OpenLayers WMTS 天地图，OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识,对我 ...
天地图一，加载天地图。
html加载天地图js4.0 需要在天地图注册并新建应用,选择浏览器端,域名白名单可以不填,默认支持所有域名下方是官方代码. http://lbs.tianditu.gov.cn/api/js4.0 ...
vue项目登陆逻辑和页面加载逻辑
最近修改了俩个vue项目登陆逻辑,摸摸摸,三改四改,总结了一些思路: 文章目录首先,理清好思路 1.什么样的情况下是登陆状态(初始化加载 => App.vue) 2. 没有登陆的情况下,项目的 ...
终端初始化vue项目报错提示无法加载文件 C：\Users\hp\AppDate\Roaming\npm\vue.ps1。
在学习的路上真的是随处可见"拦路虎",在学各种框架的路上也是. 今天没有用命令行窗口的方式新建vue项目,而是直接在vscode终端执行 vue init webpack 命令,然 ...
vue项目优化之按需加载组件-使用webpack require.ensure
使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]. ...
vue项目优化 - 网站首屏加载时间
文章目录 1. 首先打包后看看加载时间 2. vendor 2.1. 路由懒加载 2.2. (@vue/cli < 3.0.0) map.gzip.console.log 2.3. (@vue/ ...
vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中在el-table标签中添加v-load ...
vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

Vue项目嵌入天地图专题一：加载天地图

Vue项目嵌入天地图专题一：加载天地图相关推荐

最新文章

热门文章