精华内容
下载资源
问答
  • leaflet搭建vue地图组件

    万次阅读 2018-08-12 17:56:45
    leaflet搭建vue地图组件 近期写项目需要使用地图,便看到了leaflet这款集成的地图工具,这个工具提供了很多实用的接口,对于地图的显示也可以做的非常炫酷。于是就开始接触这个框架。 leaflet的官方组件使用js写的...

    leaflet搭建vue地图组件

    近期写项目需要使用地图,便看到了leaflet这款集成的地图工具,这个工具提供了很多实用的接口,对于地图的显示也可以做的非常炫酷。于是就开始接触这个框架。
    leaflet的官方组件使用js写的,由于项目是vue项目,需要组件化。网上相关leaflet的vue教程都非常少,并且大部分是写于.html文件中,而不是.vue文件,所以在写成的初期还是十分的迷茫。
    在项目的初期准备使用外国大兄弟写的VUE2leaflet,但是基于安全的因素弃用了这种方法。

    • 将leaflet通过vue的组件显示,出现vue加载瓦片不全,marker图片无法显示的问题
    • 坐标根据地图放大缩小会改变原本的位置

    问题:将leaflet通过vue的组件显示,出现vue加载瓦片不全,marker图片无法显示的问题

    浏览器的报错为无法找到marker的png,网上搜索这个原因一般是没有引入css造成的。但从代码上看,是又确确实实已经引入了相应的css和js。

    显示效果
    浏览器无法显示报错
    查看css的代码我们可以发现图片的引入是从css引入的,这样的引入在html 工程(包括用html写的vue工程)中并没有问题,但是在vue单组件应用中这样会导致引入图片失败。

    /* Default icon URLs */
    .leaflet-default-icon-path {
       background-image: url(images/marker-icon.png);
       }
    
    ①尝试在入口文件 index.tpl(index.html)添加css的引用,失败。
    
    ②尝试在style 手动加载css,失败

    解决方法:

    在头部单独引入图片,在style单独引入样式。但是这样又会出现新的问题
    图片会被识别为自定义图片,即出现位置偏差问题。(下面有解决方案)
    
    import L from 'leaflet';
    import icon from 'leaflet/dist/images/marker-icon.png';
    import iconShadow from 'leaflet/dist/images/marker-shadow.png';
    <style lang="scss">
      @import "~leaflet/dist/leaflet.css";
    </style>

    问题:自定义图标时,坐标根据地图放大缩小会改变原本的位置

    问题如下,定位点为天安门,缩小地图的zoom之后会坐标发生偏移,肉眼可看。当缩小为中国地图的时候,能从北京定位偏移到海上???

    定位偏移

    解决方案:坐标根据地图放大缩小会改变原本的位置,如图放到最大定位准确,缩小时就会发生偏差。在查阅了不少资料之后,确认问题出因为是单独引入的图片,图片会被识别为自定义图片,然后需要设置相关参数

    //自定义图标
    let greenIcon = L.icon({
      iconUrl: icon,
      shadowUrl: iconShadow,
    
      iconSize:     [30, 50], // size of the icon
      shadowSize:   [50, 64], // size of the shadow
      iconAnchor:   [15, 50], // point of the icon which will correspond to marker's location
      shadowAnchor: [15, 64],  // the same for the shadow
      popupAnchor:  [0, -40] // point from which the popup should open relative to the iconAnchor
    });
    
    上面两个参数分别为图片的地址,重点想要讲的是剩下五个参数:
    
    iconSize:图片的大小,第一个参数为宽,第二个是高
    
    shadowSize  :阴影图片的大小,参数同上
    
    iconAnchor:最重要的一个参数。官方的解释为The coordinates of the "tip" of the icon (relative to its top left corner). 
                Centered by default if size is specified, also can be set in CSS with negative margins.
                翻译一下这个属性决定了图标尖端的坐标(尖端坐标相对于其图标左上角),
                这个点如果在正确的位置,图标就会对齐。如果指定了size,则默认居中,也可以在具有负边距的CSS中设置。
    
    popupAnchor: 这个属性是阴影的最重要参数,功能与上一个参数一样不过是相对于阴影。第一个属性为shadowSize的第一个属性的1/2,第二个属性与shadowSize第二个属性相同
    
    popupAnchor:弹出框的位置,第一个参数设置左右偏移,第二个参数设置上下偏移,可以根据需求更改。

    效果如下
    定位正常图1

    再进行缩放就不会出现问题

    定位正常图2

    以上就是我这次试用leaflet踩的坑,这次使用还使用了地图切换功能(切换谷歌、高德、腾讯地图),但是没有踩坑,就没有添加了。

    展开全文
  • Vue2Leaflet 一个Leaflet地图Vue2组件
  • vue项目中leaflet的使用(我用的是直接cdn引入,也可以npm安装) <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css" rel="stylesheet"> <script src="https://cdn.bo.

    一开始想用openlayers开发离线地图,由于官网总是打不开,选择了leaflet。感觉他们都差不多。
    需要的工具:瓦片地图下载器(下载开发所需的瓦片离线地图)
    vue项目中leaflet的使用(我用的是直接cdn引入,也可以npm安装)

    <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css" rel="stylesheet">
      <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
    

    将下载的瓦片文件放到该目录,(我做测试用的直接放在本地了,正式项目会放到服务器上请求瓦片)
    在这里插入图片描述

    vue页面代码

    <template>
      <div id="map"></div>
    </template>
    <script>
    export default {
      mounted() {
        var map = L.map("map", {
          minZoom: 4,
          maxZoom: 13,
          maxBounds: [//右下角点位开始,逆时针
            [24.255729263830737, 119.71551513671876],
            [26.296414642208234, 119.73062133789064],
            [26.29391130293591, 117.4925994873047],
            [24.255729263830737, 118.7340545654297],
          ],
        }).setView([24.91695414, 118.58299255], 10);
    
        L.tileLayer("../../static/tiles/mapabc/roadmap/{z}/{x}/{y}.png", {}).addTo(
          map
        );
        map.on("click", (e) => {
          console.log(e.latlng);
        });
      },
    };
    </script>
    <style scoped>
    #map {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    </style>
    

    附上leftlet官方地址,后面自己看api开发了

    展开全文
  • LeafletVue组件 — Vue2Leaflet

    万次阅读 热门讨论 2018-04-29 18:18:09
    这两天折腾Vue,在GitHub上发现了一个开源项目Vue2LeafletVue2Leaflet是一个Vue框架的JavaScript库,封装了Leaflet,它使构建地图变得更简单。本文简单介绍了如何使用该组件,了解更多可查看作者给出的例子Vue-...

    原文地址:Leaflet的Vue组件 — Vue2Leaflet

    这两天折腾Vue,在GitHub上发现了一个开源项目Vue2Leaflet,Vue2Leaflet是一个Vue框架的JavaScript库,封装了Leaflet,它使构建地图变得更简单。本文简单介绍了如何使用该组件,了解更多可查看作者给出的例子Vue-Leaflet-Demo和作者的JSFiddle - Bouchaud Micka

    Vue2Leaflet封装的组件

    1

    Vue 环境

    工欲善其事,必先利其器。首先配置好Vue环境。
    * 安装 node + git
    * 安装 vue-cli脚手架及项目初始化

    npm i vue-cli -g
    vue init webpack vue-leaflet
    cd vue-leaflet
    npm run dev

    2

    • 访问localhost:8080,出现如下页面即成功。

    3

    安装Vue2Leaflet及使用

    npm i vue2-leaflet -S

    新建VueLeaflet.vue

    在component文件夹下删除HelloWorld.vue,新建VueLeaflet.vue文件,如下:
    4

    <template>
      <div class="vue-leaflet">
    
      </div>
    </template>
    
    <script>
    export default {
      name: 'VueLeaflet',
      data () {
        return {
    
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

    修改路由

    修改index.js,即修改HelloWorld为VueLeaflet(省略了部分代码,后面有完整代码)。

    import VueLeaflet from '@/components/VueLeaflet'
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'VueLeaflet',
          component: VueLeaflet
        }
      ]
    })

    添加LMap 组件

    <l-map style="width: 100%; height: 600px;" :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="marker">
        <l-popup :content="text"></l-popup>
      </l-marker>
    </l-map> 

    引入需要的组件

    import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
    export default {
      name: 'VueLeaflet',
      components: {
        LMap,
        LTileLayer,
        LMarker,
        LPopup
      },
      data () {
        return {
          zoom: 13,
          center: L.latLng(47.413220, -1.219482),
          url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          marker: L.latLng(47.413220, -1.219482),
          text: 'this is a marker'
        }
      }
    }

    保存后就可以在浏览器里看到地图了,但是看起来乱七八糟的,跟想象中的不一样,是因为没有引入Leaflet的样式文件。

    引入 leaflet.css

    在main.js文件中添加:

    import 'leaflet/dist/leaflet.css';

    添加后,地图是正常显示了,但是你会发现,我明明加了一个marker,为什么没有看到呢?打开控制台就明白了,marker图标没有被正确加载。

    修改icon路径

    delete L.Icon.Default.prototype._getIconUrl;
    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
      iconUrl: require('leaflet/dist/images/marker-icon.png'),
      shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
    });

    现在打开浏览器看看��
    5

    最终文件

    VueLeaflet.vue

    <template>
      <div class="vue-leaflet">
        <l-map style="width: 100%; height: 600px;" :zoom="zoom" :center="center">
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
          <l-marker :lat-lng="marker">
            <l-popup :content="text"></l-popup>
          </l-marker>
        </l-map> 
      </div>
    </template>
    
    <script>
    import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
    
    export default {
      name: 'VueLeaflet',
      components: {
        LMap,
        LTileLayer,
        LMarker,
        LPopup
      },
      data () {
        return {
          zoom: 13,
          center: L.latLng(47.413220, -1.219482),
          url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          marker: L.latLng(47.413220, -1.219482),
          text: 'this is a marker'
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import 'leaflet/dist/leaflet.css';
    
    Vue.config.productionTip = false;
    
    /* leaflet icon */
    delete L.Icon.Default.prototype._getIconUrl;
    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
      iconUrl: require('leaflet/dist/images/marker-icon.png'),
      shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
    });
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    Vue2Leafet 插件

    展开全文
  • Vue2Leaflet Vue2LeafletVue框架JavaScript库,其中包装了Leaflet,可轻松创建React式地图。 如何在Vue2Leaflet中安装npm Vue2LeafletVue框架JavaScript库,其中包装了Leaflet,可轻松创建React式地图。 如何...
  • Vue 地图 Vue2Leaflet的使用

    千次阅读 2020-04-15 16:14:17
    前面需要安装的环境 ...npm install --save leaflet //安装地图插件 npm install vue-router --save //安装路由 vue create map //创建vue项目 文件名 map cd map //切换到此目录下 npm run dev //启...

    在这里插入图片描述

    前面需要安装的环境

    npm install vue  //安装vue
    npm i vue-cli -g  //安装脚手架
    npm install --save leaflet //安装地图插件
    npm install vue-router --save //安装路由
    vue create map //创建vue项目 文件名 map
    cd map //切换到此目录下
    npm run dev //启动项目
    

    mian.js

    import Vue from 'vue'
    import App from './App'
    import router from './router/index.js'
    import 'leaflet/dist/leaflet.css';
    import L from 'leaflet'
    

    App.vue

    <template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <VueLeaflet/>
      </div>
    </template>
    
    <script>
    import VueLeaflet from '@/components/VueLeaflet'
    
    export default {
      name: 'App',
      components: {
        VueLeaflet
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    components文件下创建 组件 VueLeaflet.vue

    <template>
      <div class="vue-leaflet">
        <l-map style="width: 100%; height: 600px;" :zoom="zoom" :center="center">
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
          <l-marker :lat-lng="marker">
            <l-popup :content="text"></l-popup>
          </l-marker>
        </l-map> 
      </div>
    </template>
    
    <script>
    import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
    
    export default {
      name: 'VueLeaflet',
      components: {
        LMap,
        LTileLayer,
        LMarker,
        LPopup
      },
      data () {
        return {
          zoom: 13,
          center: L.latLng(47.413220, -1.219482),
          url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          marker: L.latLng(47.413220, -1.219482),
          text: 'this is a marker'
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    

    创建 router文件夹下index.js来存放路由

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    import VueLeaflet from '@/components/VueLeaflet'
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'VueLeaflet',
          component: VueLeaflet
        }
      ]
    })
    
    展开全文
  • vue中使用leaflet地图

    千次阅读 2021-03-12 15:13:09
    vue中使用leaflet地图 根据项目需要学习GIS地图 文章目录vue中使用leaflet地图前言一、引入leaflet地图及插件二、封装创建地图方法1.创建一个文件夹map在文件夹下创建js文件map.js![在这里插入图片描述]...
  • 本次打点适用于任何用leaflet加载的地图,本次还继续用wmts加载的地图为大家讲解。 具体代码如下 <template> <div id="app"> <div id="map" /> </div> </template> <script>...
  • 1、安装 Leaflet 插件 npm install leaflet --save 2、引入 import L from "leaflet"; import 'leaflet/dist/leaflet.css' 3、加载 <div id="map"></div> mounted() { this.initMap() }, methods:...
  • var leafletMap = L.map("map", { center: [30.279751,119.727856],// 设置地图中心点 zoom: 1, //设置当前地图显示的缩放等级 crs: L.CRS.EPSG4326 //设置坐标系4326 }) //设置地图可以进行0-22的等级缩放 var ...
  • vue项目中使用Vue2Leaflet地图组件 最近遇到一个项目,使用的是Vue2Leaflet地图插件,咱们简单地介绍一下怎么使用吧.详细内容可以看官方文档. 1.安装插件 由于项目中会使用到vue2-leafletleaflet,因此需要安装2个...
  • leaflet地图容器大小改变时,使地图自适应新容器的方法 this.$nextTick(() => { this.$refs["gaode"].map.invalidateSize(true); }) 这里因为改变了地图容器的大小,dom结构随数据而发生了改变,所以把方法写...
  • 简介vue是一个渐进式javascript框架,用来快速构建网页项目,在vue框架之上结构化leaflet地图库的产物vue2leaflet可以在vue项目中很方便的加载地图,下面简单介绍一个vue2leaflet加载地图的过程。第一个地图显示页面...
  • 地图插件 vue2-leaflet

    2021-05-13 15:23:24
    npm install leaflet vue2-leaflet --save // 或者 yarn add leaflet vue2-leaflet 使用 // 重点 重点 重点,千万别忘记引入样式,否则地图显示错位 import 'leaflet/dist/leaflet.css'; // 引入想要...
  • vue使用leafletvue使用leaflet vue使用leaflet npm安装leaflet依赖 npm install leaflet 新建vue页面,在页面中局部使用leaflet(不在main.js中设置全局使用) <template> <div class="leaflet"> ...
  • "vue2-leaflet": "^2.5.2" 组件写法: <template> <div class="vue-leaflet"> <l-map style="width: 100%; height: 100%" :zoom="map.zoom" :center="map.center" :min-zoom="map....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 719
精华内容 287
关键字:

leafletvue地图

vue 订阅