leaflet加载leaflet-canvas-marker图层时出现偏移问题解决

最新推荐文章于 2022-10-08 17:10:20 发布
最新推荐文章于 2022-10-08 17:10:20 发布
阅读量4.1k 收藏 3
点赞数 3
分类专栏： GIS JavaScript leaflet 文章标签： javascript leaflet gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwr888/article/details/124411344
版权
GIS 同时被 3 个专栏收录
26 篇文章 4 订阅
订阅专栏
JavaScript
23 篇文章 0 订阅
订阅专栏
leaflet
6 篇文章 0 订阅
订阅专栏

问题背景:
    用leaflet加载高德地图，对地图进行操作(如:放大、缩小或移动)后，再动态加载leaflet-canvas-marker图层，图层第一次(初始)叠加在地图上有偏移，对地图进行操作(如:放大、缩小或移动)后，偏移消失。[特别注意要先对地图进行操作，再加载leaflet-canvas-marker图层，否则问题不能重现]。如下图:
    第一次(初始)叠加位置：
    对地图进行操作后位置：
    初步判定为leaflet-canvas-marker的一个Bug。
问题解决:动态加载leaflet-canvas-marker图层后刷新下地图。由于没找到leaflet中Map对象刷新方法，取巧采用map.setView(map.getCenter());实现leaflet中Map对象刷新，解决以上问题。
源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leaflet canvas marker test</title>
    <!-- <link href="leaflet.css" type="text/css" rel="stylesheet"/>
    <script src="leaflet.js"></script> -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <!-- https://github.com/tontita/Leaflet.KoreanTmsProviders/blob/master/src/Leaflet.KoreanTmsProviders.js -->
    <script src="leaflet.ChineseTmsProviders.js"></script>
</head>
<body>
<div><button onclick="addMarkers()">Add Layer</button></div>
<div id="map" style="width: 100vw;height: 100vh">
</div>
<!-- <script src="leaflet.canvas-markers.js"></script> -->
<script src="https://unpkg.com/leaflet-canvas-marker@0.2.1"></script>
<script>
L.TileLayer.ChinaProvider = L.TileLayer.extend({

    initialize: function (type, options) { // (type, Object)
        var providers = L.TileLayer.ChinaProvider.providers;

        var parts = type.split('.');

        var providerName = parts[0];
        var mapName = parts[1];
        var mapType = parts[2];

        var url = providers[providerName][mapName][mapType];
        options.subdomains = providers[providerName].Subdomains;
        options.key = options.key || providers[providerName].key;
        L.TileLayer.prototype.initialize.call(this, url, options);
    }
});

L.TileLayer.ChinaProvider.providers = {
    TianDiTu: {
        Normal: {
            Map: "http://t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
            Annotion: "http://t{s}.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}"
        },
        Satellite: {
            Map: "http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
            Annotion: "http://t{s}.tianditu.com/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}"
        },
        Terrain: {
            Map: "http://t{s}.tianditu.com/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
            Annotion: "http://t{s}.tianditu.com/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}"
        },
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        key: "天地图的token key"
    },

    Mapbox: {
        streets: {
            streets: "https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token={key}"
        },
        light: {
            light: "https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token={key}"
        },
        dark: {
            dark: "https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token={key}"
        },
        outdoors: {
            outdoors: "https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token={key}"
        },
        satellite: {
            satellite: "https://api.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token={key}"
        },
        Subdomains: [],
        key: "mapbox的token key"
    },


    GaoDe: {
        Normal: {
            Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        },
        Satellite: {
            Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
            Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
        },
        Subdomains: ["1", "2", "3", "4"]
    },

    Google: {
        Normal: {
            Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Satellite: {
            Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Subdomains: []
    },

    Geoq: {
        Normal: {
            Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
            PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
            Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
        },
        Theme: {
            Hydro: "http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}"
        },
        Subdomains: []
    },

    OSM: {
        Normal: {
            Map: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        },
        Subdomains: ['a', 'b', 'c']
    },

    OfflineMap: {
        Normal: {
            Map: "http://127.0.0.1:8081/offlineMap/{z}/{x}/{y}.png",
        },
        Subdomains: []
    }

};

L.tileLayer.chinaProvider = function (type, options) {
    return new L.TileLayer.ChinaProvider(type, options);
};

    /**  
     * 智图地图内容  
    var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {  
        maxZoom: 18,  
        minZoom: 5  
    });  
    var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {  
        maxZoom: 18,  
        minZoom: 5  
    });  
    var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {  
        maxZoom: 18,  
        minZoom: 5  
    });  
    var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {  
        maxZoom: 18,  
        minZoom: 5  
    });  
    var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {  
        maxZoom: 18,  
        minZoom: 5  
    });  
    var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {  
        maxZoom: 18,  
        minZoom: 5  
    });  
     */  

    /**  
     * 天地图内容  
     */  
    var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {  
            maxZoom: 18,  
            minZoom: 5  
        }),
        normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {  
            maxZoom: 18,  
            minZoom: 5  
        }),
        imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {  
            maxZoom: 18,  
            minZoom: 5  
        }),
        imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {  
            maxZoom: 18,  
            minZoom: 5  
        });
  
    var normal = L.layerGroup([normalm, normala]),  
        image = L.layerGroup([imgm, imga]);  
    /**  
     * 谷歌  
    var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {  
            maxZoom: 18,  
            minZoom: 5  
        }),  
        satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {  
            maxZoom: 18,  
            minZoom: 5  
        });
     */  

    /**  
     * 高德地图  
     */  
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {  
        maxZoom: 18,  
        minZoom: 5  
    });
    var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {  
        maxZoom: 18,  
        minZoom: 5  
    });
    var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {  
        maxZoom: 18,  
        minZoom: 5  
    });
    var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);  

    /**  
     * 离线地图  
     */  
     var OfflineImage = L.tileLayer.chinaProvider('OfflineMap.Normal.Map', {  
        maxZoom: 10,  
        minZoom: 4
    });

    //mapbox
    var mb1 = L.tileLayer.chinaProvider('Mapbox.streets.streets',{
        maxZoom: 18,
        minZoom: 5
    });
    var mb2 = L.tileLayer.chinaProvider('Mapbox.light.light',{
        maxZoom: 18,
        minZoom: 5
    });
    var mb3 = L.tileLayer.chinaProvider('Mapbox.dark.dark',{
        maxZoom: 18,
        minZoom: 5
    });
    var mb4 = L.tileLayer.chinaProvider('Mapbox.outdoors.outdoors',{
        maxZoom: 18,
        minZoom: 5
    });
    var mb5 = L.tileLayer.chinaProvider('Mapbox.satellite.satellite',{
        maxZoom: 18,
        minZoom: 5
    });
  
    var baseLayers = {  
        //"智图地图": normalm1,  
        //"智图多彩": normalm2,  
        //"智图午夜蓝": normalm3,  
        //"智图灰色": normalm4,  
        //"智图暖色": normalm5,  
        //"智图冷色": normalm6,  
        "天地图": normal,  
        "天地图影像": image,  
        //"谷歌地图": normalMap,  
        //"谷歌影像": satelliteMap,  
        "高德地图": Gaode,  
        "高德影像": Gaodimage,
        //"图盒街道": mb1,
        //"图盒亮": mb2,
        //"图盒暗": mb3,
        //"图盒户外": mb4,
        //"图盒卫星": mb5,
    }

    var centerPoint = L.CRS.EPSG3857.project(L.latLng(39.906888, 116.397497))
    
    var map = L.map("map", {
        center: [39.906888, 116.397497], // 默认地图中心 L.CRS.EPSG3857.project(L.latLng(latlng.lat, latlng.lng))
        maxBounds: L.latLngBounds(L.latLng(53.55, 73.66), L.latLng(3.86, 135.05)), // 地图最大显示范围 L.latLng(53.55, 73.66), L.latLng(3.86, 135.05)
        crs: L.CRS.EPSG3857, 
        zoom: 5, //12
        layers: [Gaode], //Gaodimage  OfflineImage  Gaode
        detectRetina: true,
        preferCanvas: true,
        zoomControl: false  
    });
  
    //L.control.layers(baseLayers, null).addTo(map);
    L.control.zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小'
    }).addTo(map);


    function addMarkers(){
        var ciLayer = L.canvasIconLayer({}).addTo(map);
        let icon = L.icon({
            //iconUrl: 'data-icon.png',
            iconUrl: "data:image/svg+xml,%3Csvg t='1629184236836' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3737' width='48' height='48'%3E%3Cpath d='M736 32h-448c-54.4 0-96 41.6-96 96v768c0 54.4 41.6 96 96 96h448c54.4 0 96-41.6 96-96v-768c0-54.4-41.6-96-96-96z m-480 96c0-19.2 12.8-32 32-32h448c19.2 0 32 12.8 32 32v64h-512v-64z m512 768c0 19.2-12.8 32-32 32h-448c-19.2 0-32-12.8-32-32v-640h512v640z' p-id='3738'%3E%3C/path%3E%3Cpath d='M512 832m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z' p-id='3739'%3E%3C/path%3E%3C/svg%3E",
            iconSize: [20, 20],
            iconAnchor: [10, 20]
        });
        let markers = [];
        for (var i = 0; i < 3; i++) {
            var marker = L.marker([39.906888 + Math.random()*1.8, 116.397497 + Math.random()*3.6], {icon: icon}).bindPopup('我是' + i + '号站点');
            markers.push(marker);
        }
        ciLayer.addLayers(markers);
        map.setView(map.getCenter());
    }
</script>
</body>
</html>


备注:加载leaflet原生canvas图层没有偏移问题，测试代码如下:

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas test</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/zrender/5.2.1/zrender.js"></script>
    <style>
      *{
        margin: 0;
      }
      html, body, .map-wrapper, #map{
        height: 100%;
        width: 100%;
      }
      .map-wrapper {
        position: relative;
      }
      .image-coordinates-container {
        position: absolute;
        left: 8px;
        bottom: 8px;
        z-index: 1000;
        color: #666;
      }
      .canvas-layer {
        position: absolute;
        right: 8px;
        top: 8px;
        z-index: 1000;
        color: #666;
        background-color: whitesmoke;
      }
    </style>
  </head>
  <body>
    <div class="map-wrapper">
      <div id="map"></div>
      <div id="imageCoordinates" class="image-coordinates-container"></div>
      <div id="canvasLayer" class="canvas-layer"><span onclick="addCanvas();">Add canvas layer</span></div>
    </div>
    <script>
      const center = [37.7, 112.7];
      const map = L.map('map', {
        center:center,
        zoom: 6,
      });

      //Add GaoDe map layer
      L.tileLayer(
        'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        {
          subdomains: '1234',
          maxZoom: 21,
          minZoom: 3,
          coordType: 'gcj02',
        }
      ).addTo(map);

      function addCanvas(){
        //New canvas shape renderer
        const myRenderer = L.canvas({ padding: 0 });
        //Add canvas render layer
        myRenderer.addTo(map);
        //LatLng to container point
        const addPoint = [32.7, 105.7];
        const { x: cx, y: cy } = map.latLngToContainerPoint(addPoint);
        const { _ctx: ctx, _container: container } = myRenderer;
        const r = 15;
        //New zrender instance
        const zr = zrender.init(container);
        //New circle instance
        const circle = new zrender.Circle({
          shape: {
            cx,
            cy,
            r,
          },
          style: {
            fill: 'transparent',
            stroke: 'red',
          },
          silent: true,
        });
        zr.add(circle);
        //New circle animation
        const animator = circle
          .animate('shape', true)
          .when(1000, { r: 0 })
          .when(2000, { r })
          .start();
        
        myRenderer.on('update', ({ target }) => {
          const { x: cx, y: cy } = map.latLngToContainerPoint(addPoint);
          circle.attr({
            shape: {
              cx,
              cy,
            },
          });
        });
        //map.setView(map.getCenter());
      }
    </script>
  </body>
</html>

 

cwr888
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Leaflet 加载高德地图
极限突破者的博客
03-05 4984
高德地图是一款由高德软件提供的数字地图服务，在国内使用较为广泛。高德地图提供了丰富的地图数据和 API 接口，支持 Web、移动端等多种平台。本文中，我们将高德地图的wms服务加入leaflet地图对象，并构建点击事件输出高德坐标和WGS-84坐标； 在这个例子中，我们使用了高德地图的 WMS 服务，通过 方法创建了一个瓦片图层，并将其添加到地图容器中。
Leaflet.CanvasLayer.Field:在Leaflet中加载和设置栅格文件样式（geotiff和asciigrid）
05-06
IH.Leaflet.CanvasLayer.Field 的插件，可添加图层以可视化ASCIIGrid或GeoTIFF文件（EPSG：4326）中的字段（ aka Rasters ）。 警告！ npm安装的新网址 npm install ih-leaflet-canvaslayer-field 这包括： L.CanvasLayer.ScalarField可以使用不同的色标和箭头渲染的“典型”栅格图层（来自标量，例如DTM，温度...）。 L.CanvasLayer.VectorFieldAnim表示矢量场（风，水流等）的动画层，基于Cameron Becarrio的出色 该插件扩展了Stanislav Sumbera的 Leaflet插件，并使用了Fabian Schindler的 。 对于“箭头”渲染器，它包括Stuart Matthews修改过的。 演示版 下图显示了三个基本层
vue leaflet地图leaflet-canvas-marker海量点不卡顿，拖拽，缩放地图, 海量点清空，不卡顿
weixin_44151993的博客
05-27 5971
vue leaflet地图marker海量点 支持：拖拽地图，放大缩小地图，海量点清空，海量点重新标点不卡顿 vue 使用leaflet地图过程省略 leaflet 海量点 1、安装依赖 npm i leaflet-canvas-marker-xrr2021 2、在vue页面中引入依赖包 import('leaflet-canvas-marker-xrr2021') 3、初始化地图后，创建canvasIconLayer容器 that.ciLayer ： 为海量标点创建的变量名 that.ciLay
leaflet-canvas:在 Leaflet 渲染到画布之前加载的脚本
06-10
传单画布 在 Leaflet 渲染到画布之前加载的脚本
canvas-markers:用于 Google 地图的基于画布的地图标记
06-07
画布标记 用于 Google 地图的基于画布的地图标记
Leaflet-CanvasMarker:HTML5 画布上的动画标记
07-06
Leaflet-CanvasMarker HTML5 画布上的动画标记。 还不是很实用。 放大太多时会中断;-) 这个项目基本上只是一个实验，没有在任何地方使用。
leaflet 加载海量点位，点击marker 查看详情功能
山外小楼
05-29 9077
在开发有地图需要加载大量点位的时候，就不能使用L.marker 方法来 addTo(map) ,这样会导致地图特别卡，下面我们用一个插件 Leaflet.Canvas-Markers . github地址:https://github.com/eJuke/Leaflet.Canvas-Markers 里面有详情的api调用方法。 接下来我们在项目里面使用 1.加载方式 2种方法加载 cnpm ileaflet-canvas-marker -S 或者直接下载Leaf...
html转canvas创建Marker
时光清浅处，一步一安然
10-08 549
在之前的项目中，需要实现Marker不穿墙的问题，这个可以采用canvas的方式来实现，但是呢，有的一些建筑顶牌不止是单纯的建筑名称，还需要有一些其他的数据展示，甚至有可能是表格，这个时候使用canvas去画出这样的页面，就有一些耗费时间了。这样就可以大大的加快速度。:读取网页上的目标DOM节点的信息绘制成canvas，但需要注意的是，它不支持一些CSS3的属性，这个可以参考。那么我们在项目中，如何在vue中使用它，来达到我们的目的呢？其次，我们需要一个vue组件，以下简单举例，接收一个参数。
leaflet.canvas-markers.js解决数据量多加载慢问题
duonibaby的博客
04-28 3216
leaflet.canvas-markers.js快速加载点数据1.安装插件2.引入插件3.将canvas图层加载到地图4.为icon创建图标5.创建点6.把点添加到canvas图层中 1.安装插件 npm install leaflet-canvas-marker 2.引入插件 import "leaflet-canvas-marker"; 3.将canvas图层加载到地图 // 在地图上添加一个canvas图层 let ciLayer = L.canvasIconLayer({}).addTo(ma
vue+leaflet添加海量点图标
qq_40920553的博客
07-28 2856
当项目中出现需要大量点图标需要渲染时，使用img图片的方式，页面会十分卡顿，这里使用vue+leaflet利用leaflet-canvas-marker渲染海量点
Leaflet.Canvas-Markers-0.2.0
04-22
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
leaflet-markers-canvas:一个 Leaflet 插件，用于在画布而不是 DOM 中渲染许多标记
05-30
传单标记画布 一个 Leaflet 插件，用于在画布而不是 DOM 中呈现许多标记。 这是 Eugene Voynov 对的完全重写。 感谢您的启发。 演示 这是 10000 个标记的，显示在一个画布中。 用法 依赖关系 和必须在全球范围内可用或作为对等依赖项安装。 安装 从 npm 安装： npm i leaflet-markers-canvas 或下载 例子 var map = L . map ( "map" ) . setView ( [ 59.9578 , 30.2987 ] , 10 ) ; var tiles = L . tileLayer ( "http://{s}.tile.osm.org/{z}/{x}/{y}.png" , { attribution : '© <a>OpenStreet
leaflet-geojson-selector:将 GeoJSON 图层显示为交互式菜单列表
07-23
图层悬停时列表项的突出显示 缩放到图层 错误的 listOnlyVisibleLayers 错误的 仅显示地图画布中可见的项目 多 错误的 主动多选 风格 {} GeoJSON 功能的样式 活动类 '积极的' 活动列表项的 css 类名 活动风格 ...
ArcGIS实现按比例尺进行地图全图导出一张完整的大比例地图
热门推荐
cwr888的专栏
01-19 2万+
ArcGIS实现按比例尺进行地图全图导出一张完整的大比例地图 1、启动 ArcMap 2、打开一个mxd地图文档 3、切换到布局视图框，视图-布局视图，或点击左下角的布局视图 4、右键"视图"-"数据框属性"-"数据框"-"范围"，选择要输出的图片固定比例 5、点击"文件"-"页面和打印设置"。主要是选择"根据页面大小的变化按比例缩放地图元素"的复选框,然后指定页面宽、高(特别注意宽高可以手动指定，不是只能选标准A4等纸张大小)。 6、点击"文件"-"导出地图...
有些CAD通过Arcgis程序读取后，发现面积不对
cwr888的专栏
03-09 7477
有些CAD通过Arcgis程序读取后，发现面积不对，后来发现一种情况是CAD绘图时将多个相连的实体拼成了多个镂空图形，导致Arcgis程序(或其它图形程序)读取后构图不对导致面积不对。如下图所示。 1、CAD图形将多个相连的实体拼成了多个镂空图形，如下图所示： 解决方法参考： 1、通过ArcMap将CAD转成SHAPE。 2、通过ArcMap将相连的实体合并，如下图所示： 3、再通过ArcMap将SHAPE转成CAD，Arcgis程序(或其它图形程序)读取构图将正确同时面积也会正确。 ...
python读取nc文件数据生成专业气象图
cwr888的专栏
04-25 6451
python读取nc文件数据生成专业气象图如色斑图、等值线、风向标，如下图所示: 代码如下: # -*- coding: utf-8 -*- """ Created on Tue Apr 12 10:58:15 2022 @author: junco """ import numpy as np import matplotlib.pyplot as plt import matplotlib as mpl import scipy.ndimage as ndimage import xarra.
Leaflet加turf生成等值线图（或色斑图）并单击显示值
cwr888的专栏
05-11 4027
Leaflet加turf生成色斑图并单击显示值范围或精确值 参考代码如下： index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - turfjs-interpolate-isoband</title> <link rel='stylesheet' hr.......
vue2中使用leaflet-smooth-marker-transition
最新发布
05-30
在Vue2中使用leaflet-smooth-marker-transition，你需要先安装leaflet和leaflet-smooth-marker-transition插件，可以使用以下命令： ``` npm install leaflet npm install leaflet-smooth-marker-transition ``` 然后在Vue组件中引入leaflet和leaflet-smooth-marker-transition： ```javascript import L from 'leaflet'; import 'leaflet-smooth-marker-transition'; ``` 接下来你可以在Vue组件的mounted钩子中初始化地图和标记，并使用leaflet-smooth-marker-transition来实现平滑过渡的标记动画效果，例如： ```javascript mounted() { // 初始化地图 this.map = L.map('map').setView([51.505, -0.09], 13); // 添加标记 this.marker = L.marker([51.5, -0.09]).addTo(this.map); // 添加平滑过渡动画 this.marker.smoothMove({ duration: '5000ms', keepAtCenter: true }); } ``` 这样就可以在Vue2中使用leaflet-smooth-marker-transition插件实现平滑过渡的标记动画效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值