精华内容
下载资源
问答
  • map.addSource('geojson', { //添加source "type": "geojson", "data": data //这里是你的geojson数据 }); map.addLayer({ // 添加图层 id: 'measure-points',// 唯一的id source: 'geojson',

    mapbox

    代码示例

     map.on('load', function () {
         map.addSource('geojson', { //添加source
             "type": "geojson",
             "data": data  //这里是你的geojson数据
         });
         map.addLayer({ // 添加图层
             id: 'measure-points',// 唯一的id
             source: 'geojson',// source源是你刚才添加的
             type: 'circle',// 我这个类型是圆圈,可以是其他的,比如图标代替什么的
             paint: {
                 'circle-color': 'red'
             },
             layout: {
                 visibility: 'visible'
             }
         });
     })
    

    成果图
    在这里插入图片描述

    leaflet

    代码示例

    var geojsonMarkerOptions = {  // geojson点的样式
      radius: 8,
      fillColor: "#ff7800",
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
    };
    L.geoJSON(geojson, {   // 添加你的geojson数据
        pointToLayer: function (feature, latlng){
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
    }).addTo(mymap);
    

    成果图

    在这里插入图片描述

    展开全文
  • leaflet-地图文字标注

    2018-10-30 10:12:52
    可以在leaflet地图添加文字标注,可以自己设置样式,有背景色或者无背景色
  • leaflet地图缩放

    千次阅读 2018-09-20 10:15:54
    leaflet地图缩放 leaflet地图缩放方式 分数缩放 使用放大缩小按钮时zoomDelta设置每次缩放的级别 鼠标滚轮缩放 点击查看详细教程www.giserdqy.com

    leaflet之地图缩放

    • leaflet地图缩放方式

    • 分数缩放

    • 使用放大缩小按钮时zoomDelta设置每次缩放的级别

    • 鼠标滚轮缩放

    点击查看详细教程www.giserdqy.com

    展开全文
  • Leaflet地图地图视图和活动图层)添加动态URL哈希。 对于那些还缺少图层状态的人。 现在,您可以轻松地将用户链接到具有某些活动图层的特定地图视图。 演示版 您可以在此处查看leaflet-fullHash的演示: 。 入门...
  • mapbox map.addSource('raster-layer', { type: 'raster', tiles: ['你的地址... 'visible' } }) leaflet L.tileLayer("你的地址", { maxZoom: 18, id: 'raster', tileSize: 512, zoomOffset: -1 }).addTo(mymap); 成果

    mapbox

          map.addSource('raster-layer', {
              type: 'raster',
              tiles: ['你的地址']
          })
          map.addLayer({
              type: 'raster',
              source: 'raster-layer',
              id: 'layer',
              paint: { 'raster-opacity': 0.7 },
              layout: { visibility: 'visible' }
          })
    

    leaflet

        L.tileLayer("你的地址", {
          maxZoom: 18,
          id: 'raster',
          tileSize: 512,
          zoomOffset: -1
        }).addTo(mymap);
    

    成果

    在这里插入图片描述

    展开全文
  • "fill" // 瓦片类型,我这里是填充的面数据 } leaflet <script src="./leaflet/Leaflet.VectorGrid.js"></script> // 需要一个能加载矢量切片的插件 var DEFAULT_COLOR_SOCIAL_ECONOMY = ['#e3f2fd', '#90caf9', '#...

    mapbox

     map.addSource('vector', { //此处的vector是我们的source的id
     type: 'vector', // 此处vector即为矢量瓦片的类型
     tiles: [
         '你的地址,地址末尾应该是这样的{z}/{x}/{y}.vector.pbf'
     ],
     tileSize: 512
     })
     map.addLayer({
         id: "layer",
         paint: {		//此处为图层的设置,你需要自己配你自己的,我这里对数据分层设色了
             "fill-color":["step",["to-number",["get","pop"]],"#e3f2fd",1000,"#90caf9",3000,"#42a5f5",5000,"#039be5",7000,"#1565c0"],
             'fill-opacity': 1,
             'fill-outline-color': "#ff7043"
         },
         layout: {
             visibility: 'visible'
         },
         source: "vector",
         'source-layer': "layer", // 矢量瓦片都需要一个source-layer ,无特殊情况一般填layer就可以
         type: "fill"  // 瓦片类型,我这里是填充的面数据
     }
    

    leaflet

    <script src="./leaflet/Leaflet.VectorGrid.js"></script>
    // 需要一个能加载矢量切片的插件
    
     var DEFAULT_COLOR_SOCIAL_ECONOMY = ['#e3f2fd', '#90caf9', '#42a5f5', '#039be5', '#1565c0']  //我需要分层设色的数组
     /**
      * 
      * @desc 加载矢量切片
      * @params {String} url 矢量切片地址
      * 
     */
     function addVectorPbf (url, map) {
         let vectorGrid = L.vectorGrid.protobuf(url, {
             rendererFactory: L.canvas.tile,
             layerURL: url,
             vectorTileLayerStyles: {
                 // layer对应于mapbox中source-layer的值
                 layer: function (property) {
                     const num = Number(property.pop)
                     // 根据人口分段
                     let color = ''
                     if (num <= 1000) {
                         color = DEFAULT_COLOR_SOCIAL_ECONOMY[0]
                     } else if (num > 1000 && num <= 3000) {
                         color = DEFAULT_COLOR_SOCIAL_ECONOMY[1]
                     } else if (num > 3000 && num <= 5000) {
                         color = DEFAULT_COLOR_SOCIAL_ECONOMY[2]
                     } else if (num > 5000 && num <= 7000) {
                         color = DEFAULT_COLOR_SOCIAL_ECONOMY[3]
                     } else {
                         color = DEFAULT_COLOR_SOCIAL_ECONOMY[4]
                     }
                     return {
                         "weight": 0.3,
                         "color": '#ff7043',
                         "fill": true,
                         "fillColor": color,
                         "fillOpacity": 1,
                         "opacity": 1
                     }
                 }
             },
             maxZoom: 20,
             interactive: true,
             pane: 'overlayPane'
         }).addTo(map)
     }
     addVectorPbf('你的地址,末尾应该是/{z}/{x}/{y}.vector.pbf', map)
        
    

    结果

    在这里插入图片描述

    展开全文
  • leaflet离线地图api

    2016-05-06 09:25:51
    leaflet中文api
  • leaflet添加各种地图的服务

    千次阅读 2019-12-30 16:53:24
    leaflet添加各种地图的服务 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加载各式的地图</title> <link rel="stylesheet" href=...
  • leaflet——地图事件

    千次阅读 2019-02-19 11:41:41
    leaflet地图事件主要有以下几类:  1. 图层事件: baselayerchange,overlayadd,overlayremove,layeradd,layerremove 2.地图状态改变事件  load,upload,move,zoom,zoomed,moveed,resize等 3.弹出框事件 ...
  • Leaflet添加信息框

    2021-03-16 13:55:23
    Leaflet添加信息框 借鉴官网上弟5个例子 L.Control 是实现地图控制的基本类。 每个控制都应从L.Control扩展中实施方法。 想要在地图上添加容器,或窗口必须通过L.Control的onAdd方法 1.先在css中设置好你要添加的...
  • 最近很多小伙伴使用iClient for Leaflet中的第三方地图百度地图展示marker时发现有偏移的问题,今天我们就来聊聊如何正确展示。 二:坐标转换 首先百度地图使用的是BD09坐标,若使用非BD09坐标、未经过坐标转换(非...
  • leaflet 添加分屏,比较两个地图的叠加sideBySide

    千次阅读 热门讨论 2019-04-15 11:17:54
    2. 首先需要下载leaflet-side-by-side.js, 可到官网代码中下载:https://github.com/digidem/leaflet-side-by-side 3. 下载的js文件可放到assets中 然后引入到项目中,本文引用到angular.json中 4. 官网调用...
  • .bindTooltip(" " + (map.distance(line.getP1(), line.getP2()) / 1000).toFixed(2) + "km", { permanent: true,//添加距离提示 }) .addTo(map)//完成画线 .openTooltip(); } ...
  • leaflet地图容器大小改变时,使地图自适应新容器的方法 this.$nextTick(() => { this.$refs["gaode"].map.invalidateSize(true); }) 这里因为改变了地图容器的大小,dom结构随数据而发生了改变,所以把方法写...
  • <p>i want to add wind data on my leaflet map as a layer wind data like this <a href="https://danwild.github.io/leaflet-velocity/" rel="nofollow noreferrer">...
  • 自定义投影添加地图经纬度投影地图 L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, { code: 'EPSG:4326', projection: L.Projection.LonLat, transformation: new L.Transformation(1 / 180, 1, -1 /...
  • leaflet——地图加载

    千次阅读 2018-12-26 15:44:14
    添加图片作为地图 除了以上常见的地图提供商的地图,在有些时候需要使用自己的地图,例如图片,这时就可以使用: L.imageOverlay(imageUrl, imageBounds).addTo(mymap); leaflet加载各种地图 Leaflet...
  • 使按钮不相应leaflet地图事件

    千次阅读 2017-08-04 13:47:48
    业务需要自己添加了几个按钮,样式为:class='leaflet-control leaflet-bar'与leaflet库自带功能的按钮样式一样,看上去很漂亮,但是在自添加按钮上点击、双击、拖动时会产生地图事件。解决方法给leaflet的dom添加...
  •  首先给popup的content添加button: &lt;l-popup :content="profile1-1+ '&lt;br&gt;&lt;button id="btnCon"&gt;进入&lt;/button&gt;'"&gt;&lt;/l-popup...
  • leaflet加载天地图

    千次阅读 2016-11-04 07:54:56
    leaflet是一个轻量级的并且开源的地图框架,是由esri发起的,由于其轻量、简单而被大家喜欢,本文带你学习如何在leaflet中加载天地图

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,792
精华内容 716
关键字:

leaflet添加地图