在vue中使用leaflet加载矢量切片（pbf）

最新推荐文章于 2024-09-04 15:51:21 发布

迷茫的小猿

最新推荐文章于 2024-09-04 15:51:21 发布

阅读量3.3k

点赞数 1

分类专栏： geoserver leaflet 文章标签： leaflet geoserver

本文链接：https://blog.csdn.net/weixin_43747076/article/details/106585697

版权

本文介绍了如何在Vue项目中利用Leaflet集成矢量切片（PBF）数据，通过详细步骤指导，包括安装依赖、获取PBF url以及展示具体代码实现。

摘要由CSDN通过智能技术生成

第一步：安装依赖

首先你的先安装两个依赖：leaflet和leaflet.vectorgrid

cnpm install leaflet --save
cnpm install leaflet.vectorgrid --save

第二步：获取url

注意：咱们用leaflet加载的是pbf，使用的L.vectorGrid.protobuf，如果需要加载geojson,使用的是L.vectorGrid.slicer

首先打开geoserver，点击图标Geoserver标志
在这里插入图片描述
然后点击TMS下面的1.0.0

找到你所发布的那个图层的pbf的href，复制下来

最后把你复制的url再加上“/{z}/{x}/{y}.pbf”就是你想要的url了

第三步：代码书写

代码：

<template>
    <div id="map" class="mapStyle"  ref="rootmap">
    </div>
</template>

<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
// import "leaflet.vectorgrid/dist/Leaflet.VectorGrid.js";
import "leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js"; //注意：Leaflet.VectorGrid.bundled.js和Leaflet.VectorGrid.js不能同时引用，否则会报错


export default {
   
  data() {
   
    return {
   
      m