Uniapp微信小程序使用个性化图层

海上彼尚

已于 2023-12-19 17:34:59 修改

阅读量380

点赞数 2

分类专栏：前端开发插件文章标签： uni-app 微信小程序小程序

于 2023-11-01 15:58:27 首次发布

本文链接：https://blog.csdn.net/weixin_63443072/article/details/134162769

版权

前端开发插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近遇到一个项目，需要使用个性化图层。类似于这种：

由于是微信小程序，让我不由想到了腾讯地图。（个人感觉腾讯地图对开发者友好，文档清晰。比起某度的地图文档，用着让我苦不堪言。）

长话短说，其实小程序就一行代码：

<web-view src="h5网页url"><web-view/>

为啥要用这个？

其实一开始我也是想用小程序的map，但是发现目前实现很难。所以我开始思考h5。
腾讯地图的个性地图还是beta版，看起来像低代码。
腾讯地图的JavaScritp开发文档上面，有做这种类似的效果，而且似乎更容易实现。

在我确认使用腾讯地图之后，还有一个问题。

没错，就是不知道采用哪一种。究竟是栅格图层还是，叠加图层。我又长话短说：

栅格图层：需要很多图片，但是清晰，放大缩小就重新加载新图片。
叠加图层：图片用的少，但是放大或缩小就丢帧。

大家看自己具体需求，总之我选择了栅格图层。下面正式进入正题：

技术栈：Vue3

首先要引入地图的依赖，直接在项目的index.html文件中引入script标签：

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>腾讯地图测试</title>
</head>

<body>
  <div id="app"></div>
  <script src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

在然后就是在需要的地方写入script就好，由于我只是测试，所以直接在App.vue中使用：

# html
<template>
  <div id="map_view"></div>
</template>

# script
<script setup>
import { onMounted } from 'vue';

// 在setup中无法访问到dom元素
onMounted(() => {
  // 创建地图实例
  const map = new TMap.Map(document.getElementById('map_view'), {
    center: new TMap.LatLng(26.870355, 100.239704),// 地图中心坐标（纬度，经度） 29.064, 119.63
    viewMode: '2D',
    baseMap: {
      type: 'vector',//类型：失量底图
      features: ['base', 'building2d']//仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
    }
  })

  // 瓦片地图
  const imageTileLayer = new TMap.ImageTileLayer({
    // 拼接瓦片url
    getTileUrl: function (x, y, z) {
      console.log(x, y, z);// 地图缩小放大后，查看控制台你就懂了
      return 'http://localhost/javascript_gl/sample/img/tilelayer/' + z + '/' + x + '_' + y + '.png'
    },
    tileSize: 256,  //瓦片像素尺寸
    minZoom: 14,    //显示自定义瓦片的最小级别
    maxZoom: 16,    //显示自定义瓦片的最大级别
    visible: true,  //是否可见
    zIndex: 5000,   //层级高度（z轴）
    opacity: 1,  //图层透明度：1不透明，0为全透明
    map      //设置图层显示到哪个地图实例中
  })
})
</script>

海上彼尚

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
Uniapp微信小程序使用个性化图层

由于是微信小程序，让我不由想到了腾讯地图。（个人感觉腾讯地图对开发者友好，文档清晰。比起某度的地图文档，用着让我苦不堪言。没错，就是不知道采用哪一种。究竟是栅格图层还是，叠加图层。大家看自己具体需求，总之我选择了栅格图层。最近遇到一个项目，需要使用个性化图层。在我确认使用腾讯地图之后，还有一个问题。
复制链接

扫一扫