在Vue 3项目中集成天地图(Tianditu)主要涉及到几个关键步骤:项目设置、API的引入与使用、以及地图组件的创建。以下是一个详细的步骤说明,包括必要的代码示例。 1. 安装和配置Vue3项目 首先,确保你已经有一个Vue 3项目。如果没有,你可以使用Vue CLI来创建一个: bash npm install -g @vue/cli vue create my-vu...
在index.html 文件中引入天地图 API 4.0 版本。 获取天地图 API 密钥并将其添加到脚本源中。 初始化地图 创建一个名为 mapDiv 的容器,并设置样式。 在Vue 组件中使用 onMounted 生命周期钩子初始化天地图实例。 设置地图类型为矢量图,并设置中心点和缩放级别。 然后在页面中渲染天地图 <template> </template> ...
2、这些内容都是接触前端地图框架之前为了完成需求所琢磨的原生天地图API用法,在那个时候我属于是懂点GIS但是不知道有WebGIS框架,所以其实属于比较笨的方法。 3、对于要求用到天地图的项目,我建议还是使用一个前端WebGIS框架,引入天地图作为底图,再通过框架去实现各种需求。 import {onMounted, ref} from "vue"; var ...
default: 'baidu', // 地图类型 默认1.tianditu天地图/2.baidu百度地图/3.tencent腾讯地图/4.amap高德地图 }, }, emits: ['point'], setup(props, context) { // 密钥 const common_amap_map_ak = 'xxxxxxxxxxx'; const common_amap_map_safety_ak = 'xxxxxxxxxx'; const common_baidu_map_ak = ...
首先,在index.html引入天地图资源,vue3选择v4版本 1. 使用<BasicModal>组件作为模态框基础样式,并通过@register、@ok、@cancel等事件来注册、提交和取消选择点位操作。 组件内部使用天地图(Tianditu)进行地图展示和操作,包括初始化地图、点击地图获取坐标、根据地址搜索坐标等。 组件提供...
2、在Vue3 的中使用天地图 先看代码: var map var localsearch const init = () => { //这里T指向天地图对象 var T = window.T; //初始化地图,创建一个新的地图实例 //其中 `T.Map` 接收的第一个参数是在html中天地图标签的ID //第二个参数是天地图的参考...
1,先去天地图官方网站注册并创建key 天地图 2,在项目的public里的index.html中把刚才注册好的key给引进去 <!DOCTYPE html><link rel="icon" href="<%= BASE_URL %>favicon.ico"><%= htmlWebpackPlugin.options.title %><noscript>We're sorry but <%= htmlWebpackPlugin....
vue3 +leaflet + 天地图 vue3使用leaflet npm install leaflet -D 如果使用了ts npm i --save-dev @types/leaflet// 使用了ts需要下载声明类型 // 更具需要获取不通过类型的urlfunctiongetUrl(type:string) { interfaceMyObject{ [key: string]:Array<string>;...
以加载天地图为例,需要先到天地图官网去申请开发者,获取一个token,以下代码直接粘贴就行,注释中已说明 //初始化地图 let viewer; function initMap() { const tianDiTuToken = "天地图token"; const mapOption = { url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LA...
1、调用天地图的坐标拾取方法 T.CoordinatePickup,获取当前鼠标点击位置的地理坐标,并执行回调函数; 2、回调函数负责:判断是否以及存在标记点,如果存在,删除;然后新建一个标记点。 实现方法: 假定你已经在index.html里面引用天地图api了。 Vue3组件部分: const currentLngLat = ref([1114.51444, 22.114514]) var ...