第一次使用leaflet

最新推荐文章于 2021-12-15 11:28:46 发布
最新推荐文章于 2021-12-15 11:28:46 发布
阅读量328 收藏 1
点赞数
分类专栏： leaflet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39432715/article/details/113660737
版权

1.下载leaflet

https://leafletjs.com/download.html

2.下载插件leaflet-draw

http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html

3.贴代码

结合的天地图

<html>
<head>
    <title>天地图结合</title>

    <script src="../static/lib/leaflet/leaflet-src.js"></script>
    <link rel="stylesheet" href="../static/lib/leaflet/leaflet.css">

    <script src="../static/lib/Leaflet.draw/src/Leaflet.draw.js"></script>
    <script src="../static/lib/Leaflet.draw/src/Leaflet.Draw.Event.js"></script>
    <link rel="stylesheet" href="../static/lib/Leaflet.draw/src/leaflet.draw.css">

    <script src="../static/lib/Leaflet.draw/src/Toolbar.js"></script>
    <script src="../static/lib/Leaflet.draw/src/Tooltip.js"></script>

    <script src="../static/lib/Leaflet.draw/src/ext/GeometryUtil.js"></script>
    <script src="../static/lib/Leaflet.draw/src/ext/LatLngUtil.js"></script>
    <script src="../static/lib/Leaflet.draw/src/ext/LineUtil.Intersect.js"></script>
    <script src="../static/lib/Leaflet.draw/src/ext/Polygon.Intersect.js"></script>
    <script src="../static/lib/Leaflet.draw/src/ext/Polyline.Intersect.js"></script>
    <script src="../static/lib/Leaflet.draw/src/ext/TouchEvents.js"></script>

    <script src="../static/lib/Leaflet.draw/src/draw/DrawToolbar.js"></script>
    <script src="../static/lib/Leaflet.draw/src/draw/handler/Draw.Feature.js"></script>
    <script src="../static/lib/Leaflet.draw/src/draw/handler/Draw.SimpleShape.js"></script>
    <script src="../static/lib/Leaflet.draw/src/draw/handler/Draw.Polyline.js"></script>
    <script src="../static/lib/Leaflet.draw/src/draw/handler/Draw.Marker.js"></script>
    <script src="../static/lib/Leaflet.draw/src/draw/handler/Draw.Circle.js"></script>
    <script src="../static/lib/Leaflet.draw/src/draw/handler/Draw.CircleMarker.js"></script>
    <script src="../static/lib/Leaflet.draw/src/draw/handler/Draw.Polygon.js"></script>
    <script src="../static/lib/Leaflet.draw/src/draw/handler/Draw.Rectangle.js"></script>


    <script src="../static/lib/Leaflet.draw/src/edit/EditToolbar.js"></script>
    <script src="../static/lib/Leaflet.draw/src/edit/handler/EditToolbar.Edit.js"></script>
    <script src="../static/lib/Leaflet.draw/src/edit/handler/EditToolbar.Delete.js"></script>

    <script src="../static/lib/Leaflet.draw/src/Control.Draw.js"></script>

    <script src="../static/lib/Leaflet.draw/src/edit/handler/Edit.Poly.js"></script>
    <script src="../static/lib/Leaflet.draw/src/edit/handler/Edit.SimpleShape.js"></script>
    <script src="../static/lib/Leaflet.draw/src/edit/handler/Edit.Rectangle.js"></script>
    <script src="../static/lib/Leaflet.draw/src/edit/handler/Edit.Marker.js"></script>
    <script src="../static/lib/Leaflet.draw/src/edit/handler/Edit.CircleMarker.js"></script>
    <script src="../static/lib/Leaflet.draw/src/edit/handler/Edit.Circle.js"></script>
    <style>
        /* body{
            background-color: #f5d107;
        } */
    </style>
</head>

<body class="">
    <div id="map" style="width: 100%; height: 100%; border: 1px solid rgb(204, 204, 204); position: relative;"
        class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-touch-zoom leaflet-grab leaflet-touch-drag"
        tabindex="0">
    </div>

    <script src="../static/lib/jquery.min.js"></script>
    <script>
        //地图对象
        let map;
        //天地图影像
        let tdt = {
            img_c: null,
            img_w: null,
            ter_c: null,
            ter_w: null,
            vec_c: null,
            vec_w: null
        }
        /*
        *获取json
        */
        function getJSON() {
            $.getJSON("../static/json/Build.json", function (data) {
                loadJSON(data, function (layer) {
                    layer.on('click', function (evt) {
                        let fea = evt.layer.feature
                        target = evt.target
                        evt.sourceTarget.setStyle({
                            fillColor: '#53e033',
                            color: "#ff0000"
                        })
                        let shuxing = evt.layer.feature.properties
                        for (var p in shuxing) {//遍历json数组时，这么写p为索引，0,1
                            // console.log(p);
                            // console.log(shuxing[p]);
                        }
                    })
                });
            })
            $.getJSON("../static/json/Lake.json", function (data) {
                loadJSON(data, function (layer) {
                    layer.on('click', function (evt) {
                        let fea = evt.layer.feature
                        target = evt.target
                        evt.sourceTarget.setStyle({
                            fillColor: '#53e033',//填充颜
                            color: "#ff0000"
                        })
                        let shuxing = evt.layer.feature.properties
                        for (var p in shuxing) {//遍历json数组时，这么写p为索引，0,1
                            // console.log(p);
                            // console.log(shuxing[p]);
                        }
                    })
                });
            })
            $.getJSON("../static/json/River.json", function (data) {
                loadJSON(data, function (layer) {
                    layer.on('click', function (evt) {
                        let fea = evt.layer.feature
                        target = evt.target
                        evt.sourceTarget.setStyle({
                            fillColor: '#53e033',//填充颜
                            color: "#ff0000"
                        })
                        let shuxing = evt.layer.feature.properties
                        for (var p in shuxing) {//遍历json数组时，这么写p为索引，0,1
                            // console.log(p);
                            // console.log(shuxing[p]);
                        }
                    })
                });
            })
        }
        /*
        *加载json
        */
        function loadJSON(data, func) {
            //使用leaflet加载json，创建layer
            var layer = L.geoJSON(data, {
                //遍历feature
                onEachFeature: onEachFeature,
                //设置样式
                style: function (feature) {
                    return {
                        //边框颜色
                        color: feature.properties.color,
                        //填充颜色
                        fillColor: feature.properties.fillcolor,
                        //填充透明度
                        fillOpacity: 1
                    };
                }
            });

            //添加到地图，并定位
            layer.addTo(map);
            
            func(layer);

            //循环遍历每一个feature，给feature添加信息
            function onEachFeature(feature, layer) {
                // console.log(feature);
            }
        }
        /*
         *初始化地图
         */
        function initMap() {
            map = L.map('map',
                {
                    crs: L.CRS.EPSG4326,
                    zoomControl: true,
                    editable: true
                }).setView([36.624281, 117.291356], 13);

            //影像图
            tdt.img_c = L.tileLayer('http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=93724b915d1898d946ca7dc7b765dda5', {
                maxZoom: 17,
                tileSize: 256,
                zoomOffset: 1,
                minZoom: 3
            });
            tdt.img_w = L.tileLayer('http://t{s}.tianditu.gov.cn/img_w/wmts?tk=密钥&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
                maxZoom: 17,
                tileSize: 256,
                zoomOffset: 1,
                zIndex: 5,
                minZoom: 3
            });

            //地形渲染
            tdt.ter_c = L.tileLayer('http://t1.tianditu.com/ter_c/wmts?layer=ter&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=93724b915d1898d946ca7dc7b765dda5', {
                maxZoom: 17,
                tileSize: 256,
                zoomOffset: 1,
                minZoom: 3
            });
            tdt.ter_w = L.tileLayer('http://t{s}.tianditu.gov.cn/ter_w/wmts?tk=密钥&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
                maxZoom: 17,
                tileSize: 256,
                zoomOffset: 1,
                minZoom: 3
            });


            //矢量底图
            tdt.vec_c = L.tileLayer('http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=93724b915d1898d946ca7dc7b765dda5', {
                maxZoom: 17,
                tileSize: 256,
                zoomOffset: 1,
                minZoom: 3
            });
            tdt.vec_w = L.tileLayer('http://t{s}.tianditu.gov.cn/vec_w/wmts?tk=密钥&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
                maxZoom: 17,
                tileSize: 256,
                zoomOffset: 1,
                minZoom: 3
            });


            //画图工具
            var drawnItems = L.featureGroup().addTo(map);

            //设置图层源
            L.control.layers(
                //加载图层
                {
                    'img': tdt.img_c.addTo(map),
                    'ter': tdt.ter_c.addTo(map),
                    'vec': tdt.vec_c.addTo(map)
                },
                //画图工具
                { 'drawlayer': drawnItems },
                //是否切换地图源
                { position: 'topleft', collapsed: false }
            ).addTo(map);


            //设置编辑工具
            map.addControl(new L.Control.Draw({
                //是否编辑
                edit: {
                    featureGroup: drawnItems,
                    poly: {
                        allowIntersection: false
                    }
                },
                draw: {
                    polygon: {
                        allowIntersection: false,
                        showArea: true
                    }
                }
            }));
            //设置finish等工具按钮
            map.on(L.Draw.Event.CREATED, function (event) {
                var layer = event.layer;
                drawnItems.addLayer(layer);
            });
        }
        /*
        *初始化
        */
        function init() {
            //初始化地图
            initMap();
            //加载json
            getJSON();
        }
        window.addEventListener('load', init, false);

    </script>
</body>

</html>
笑看风云不留痕
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Leaflet.draw-develop.zip
09-15
为地图增加绘制自定义图形功能，
前端项目-leaflet-editable.zip
09-03
前端项目-leaflet-editable,Make geometries editable in Leaflet
leaflet-draw:学习传单绘制插件
08-04
传单绘制插件 学习如何用纯js实现传单绘制插件！ 结帐现场示例 -> 。
Leaflet.draw
06-06
重要的 Leaflet.draw 0.2.3+ 需要或更高版本。 #Leaflet.draw 添加对在上绘制和编辑矢量和标记的支持。 查看。 从 Leaflet.draw 0.1 升级 Leaflet.draw 0.2.0 从 0.1 改变了很多东西。 请参阅了解如何升级。 目录 // create a map in the "map" div, set the view to a given place and zoom var map = L . map ( 'map' , { drawControl : true } ) . setView ( [ 51.505 , - 0.09 ] , 13 ) ; // add an OpenStreetMap tile layer L . tileLayer ( 'http://{s}.tile.osm.org/{z}/{x}/{y}
Leaflet.draw-master.zip
10-29
leaflet图上作业选板以及相关控件开发 完整工具集 增加了对leaflet地图的绘制和编辑和标记的支持
Leaflet.Editable简单使用
六五酥的博客
09-29 2083
<head> <script src="Leaflet.Editable/src/Leaflet.Editable.js"></script> </head> var leafletMap = L.map('mapDiv', { editable: true //需设置为可编辑 }); leafletMap.on('editable:drawing:start', function (e) { cons
Leaflet-学习
越努力，越幸运！
09-18 3573
一、官网 英文官网：Leaflet 中文官网：Leaflet 二、介绍 Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有39 KB, 并且拥有绝大部分开发者所需要的所有地图特性。 Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的扩展插件、优秀的文档、简单易用的API和完善的案例, 以及可读性较好的源码。 三、下载Leaflet 【1】CDN // html头部引入 <link rel="s...
vue 项目中引入 leaflet.draw.js 报错
weixin_43055905的博客
09-19 1610
报错信息： ##Leaflet 本身不支持点线面的绘制，需要引入插件 leaflet.draw.js github 下载地址 ：https://github.com/Leaflet/Leaflet.draw 在搭建好vue项目基础上，执行命令 main.js文件 import '_leaflet[email protected]@leaflet-draw/dist/leaflet.draw.css';...
leaflet常用插件(持续更新)
立青的博客
12-15 1556
1. 测量 测量距离（效果一） https://gokertanrisever.github.io/leaflet-ruler/ 测量距离（效果二） https://nltgit.github.io/Leaflet.LinearMeasurement/ 2. 动态轨迹 动态的船舶轨迹 https://github.com/linghuam/Leaflet.TrackPlayBack 3. canvas 图标绘制 https://github.com/eJuke/Leaflet.Canvas-Marke
leaflet中文版
12-17
使用leaflet地图时用到的中文文档，内容很细，使用leaflet地图时用到的中文文档，内容很细，非常适合初学者使用
Leaflet.label-master.zip
01-08
包含leaflet开发地图所需的框架和插件，比如leaflet.label.js，leaflet.label-src.js，example中可以运行label.html，可修改为加载本地离线的瓦片地图 实现的功能有： 显示标记的矩形框，点，线 移动标记以确认标记移动时标签是否移动（第一次单击） 单击时删除标记，以便我们可以检查标签是否也被删除（第二次单击） 单击时删除折线，以便我们检查标签是否也已删除
前端项目-leaflet.draw.zip
09-03
前端项目-leaflet.draw,Vector drawing plugin for Leaflet
leaflet-idw.7z
07-06
一个基于leaflet的反距离权重插值Demo，内涵完整的示例代码，leaflet，已经反距离插值算法插件
leaflet-challenge
04-17
使用Leaflet创建地图，该地图根据数据集的经度和纬度绘制所有地震的图。 您的数据标记应通过地震的大小和颜色来反映地震的幅度，并通过颜色来反映地震的深度。 强度较大的地震应该看起来更大，深度较大的地震应该看...
Leaflet-Challenge
04-08
第2级：可视化数据使用Leaflet创建地图，该地图根据数据集的经度和纬度绘制所有地震的图。 您的数据标记应通过地震的大小和颜色来反映地震的幅度，并通过颜色来反映地震的深度。 强度较大的地震应该看起来更大，深度...
Visualizing_Data_Leaflet-
05-09
第17单元| 分配-使用传单可视化数据背景 欢迎来到美国地质调查... 获取数据集 USGS提供了多种不同格式的地震数据，每5分钟更新一次。 访问页面并选择一个数据集以进行可视化。 当您单击数据集时，例如“过去7天的所有地
Leaflet-Challenge:作业＃16
03-31
这是我的第16个工作日，也是我第一次使用“传单”分配可视化数据。 关于这项任务的背景，这与美国地质调查局（USGS）有关。 USGS负责提供有关自然灾害，我们的生态系统和环境健康的科学数据； 以及气候和土地利用...
基于Leaflet.draw的自定义绘制实战
热门推荐
夜郎King的博客
12-11 2万+
本文介绍了如何基于leaflet.draw进行自定义绘制，同时获取对象的bbox和geojson信息。
使用leaflet 添加一个线
最新发布
03-31
1. 首先，需要导入leaflet库和地图数据。 ``` <!--leaflet库--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-4eMZ4nG8EeB9Mn+rA3vz3qhlW1iQK1...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值