基于Leaflet实现图标旋转角度的效果(附源代码下载)

最新推荐文章于 2024-04-29 18:16:03 发布

动立信息服务

最新推荐文章于 2024-04-29 18:16:03 发布

阅读量1.8k

点赞数 2

分类专栏： Leaflet高级篇文章标签： javascript 前端

本文链接：https://blog.csdn.net/liu2004051957/article/details/128320163

版权

Leaflet高级篇专栏收录该内容

2 篇文章 2 订阅

订阅专栏

前言

本文将详细描述如何基于Leaflet开发库实现Marker图标旋转角度的应用效果，如下图所示。

一、开发技术

Leaflet开发库：Leaflet 1.9.3

图标旋转插件：下载地址为：Leaflet Rotated Marker

二、实现思路

1、下载Leaflet Rotated Marker插件：

传统的开发方式可直接下载相应的js和css文件到本地；

使用Node.js开发方式可通过 npm install leaflet-rotatedmarker 命令安装即可。

2、核心实现思路

安装Leaflet Rotated Marker插件后，同样，使肜L.marker添加图标，同时通过rotationAngle属性添加需要旋转的角度，如下所示。

//添加图标
L.marker([48.8631169, 2.3708919], {
    rotationAngle: 45  //需要旋转的角度
}).addTo(map);

三、实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Leaflet地图应用开发高级篇</title>
    <!--引用leaflet样式-->
    <link href="./static/css/leaflet.css" rel="stylesheet" />

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #l_map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="l_map"></div>
    <!--引用leaflet库-->
    <script type="text/javascript" src="./static/js/leaflet.js"></script>
    <!--图标旋转插件-->
    <script src="./static/plugins/Leaflet.RotatedMarker-master/leaflet.rotatedMarker.js"></script>
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        var map = null;
        /**初始化地图显示
        */
        function initMap() {
            //地图容器
            map = L.map('l_map', {
                //参考坐标系
                crs: L.CRS.EPSG3857,
                //显示中心
                center: [22.27, 113.57],
                //最小显示等级
                minZoom: 1,
                //最大显示等级
                maxZoom: 18,
                //当前显示等级
                zoom: 8,
                //设置缩放控件不显示
                zoomControl: false,
                noWrap: true,
                //设置版权属性值的显示内容
                attribution: ''
            });
            var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                attribution: ''
            });
            //初始时加载天地图影像图层组
            map.addLayer(Esri_WorldImagery);

            //定义一个地图缩放控件
            var zoomControl = L.control.zoom({ position: 'bottomright' });
            //将地图缩放控件加入到地图容器中
            map.addControl(zoomControl);

            addMarker();

        }

        function addMarker() {
            var icon = L.icon({
                //图标地址
                iconUrl: "./static/images/ico_plant.png",
                //图标大小
                iconSize: [48, 48]
            });

            var marker1 = L.marker([22.27, 113.57], {
                rotationAngle: 120,
                icon: icon,
                draggable: false
            });
            marker1.addTo(map);

            var marker2 = L.marker([21.27, 114.57], {
                rotationAngle: 135,
                icon: icon,
                draggable: false
            });
            marker2.addTo(map);

            var marker3 = L.marker([21.27, 115.57], {
                rotationAngle: 90,
                icon: icon,
                draggable: false
            });
            marker3.addTo(map);

            var marker4 = L.marker([21.80, 116.57], {
                rotationAngle: 60,
                icon: icon,
                draggable: false
            });
            marker4.addTo(map);

            var marker4 = L.marker([22.80, 117.57], {
                rotationAngle: 0,
                icon: icon,
                draggable: false
            });
            marker4.addTo(map);
        }
        initMap();
    </script>
</body>
</html>