leaflet+天地图+画区域

最新推荐文章于 2024-05-22 10:44:27 发布

凉栀—5°

最新推荐文章于 2024-05-22 10:44:27 发布

阅读量408

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/qq_42668492/article/details/132171961

版权

场景：需要在地图上展示区域，区域中心需展示内容，并且支持内容旋转；

<!--
 * @Description: 
 * @Autor: zhengyuanxia
 * @Date: 2022-08-08 14:33:20
 * @LastEditors: zhengyuanxia
 * @LastEditTime: 2023-08-08 15:52:27
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.3/leaflet-src.js"></script>
        <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.3/leaflet.css" rel="stylesheet">
    </head>
    <body>
        <div id="map" style="width: 600px;height: 600px;"></div>
        <script>
            // 实例化地图
            var map = window.map = L.map('map', {
                crs: L.CRS.EPSG4326
            }).setView([35.259932921201106, 116.97290730347217], 17);
    
            // 增加天地图图层
            L.tileLayer("https://{s}.tianditu.gov.cn/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=24f053f3d41f3e2df373d25ed9d8fef7", {
                    maxZoom: 20,
                    tileSize: 256,
                    zoomOffset: 1,
                    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
                }
            ).addTo(map);
            
            // 点位
            function getCoordinates(list) {
                var arr = [];
                list.forEach((item) => {
                    var point = [];
                    point[0] = item.lat;
                    point[1] = item.lng;
                    arr.push(point);
                });
                return arr;
            }

            // 区域数据
            var datas = [{
                coordinates: "116.97290730347217,35.259932921201106#116.9745377819048,35.260423253905294#116.97462359655914,35.259232440763085",
                id: "1b53fe785a4449fab978459e27bcd473",
                name: "0808-001",
                overlays: "[{\"lat\":35.259932921201106,\"lng\":116.97290730347217},{\"lat\":35.260423253905294,\"lng\":116.9745377819048},{\"lat\":35.259232440763085,\"lng\":116.97462359655914}]"
            }]
            var color = "#1ab394";
            var coordinates = getCoordinates(JSON.parse(datas[0].overlays));
            var shapes = new L.Polygon(coordinates, {
                color: color,
                weight: 1,
                id: datas.id,
            }).addTo(map);

            // 显示文字
            var content = '<div>45</div>';
        
            var myIcon = L.divIcon({
                html: "<div class='rotate' style='color:#fff;'>" + content + "</div>",
                className: 'my-div-icon',
                iconSize: 14
            });
        
            // 中心点位
            L.marker(shapes.getCenter(), { icon: myIcon}).addTo(map);
            
            var icons = document.querySelectorAll('.rotate');
            icons.forEach((item, index) => {
                item.style.transform = 'rotateZ(100deg)';
            });
        </script>
    </body>
</html>