地图选点画围栏

最新推荐文章于 2024-08-27 16:22:25 发布
原创最新推荐文章于 2024-08-27 16:22:25 发布 · 1.1k 阅读
2 ·
CC 4.0 BY-SA版权
文章标签：
#javascript #jquery #html
JavaScript 同时被 2 个专栏收录
19 篇文章
订阅专栏
jQuery
11 篇文章
订阅专栏
thymeleaf中要把 & 替换成 & 链接中的 key要自己申请
<!DOCTYPE html>
<html style="height: 100%;">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <link rel="icon" type="image/png" sizes="144x144" href="https://image.youjiule.cn/60141434-6e27-4d09-b84d-60fd33dc2887"/>
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=xxx&libraries=tools"></script>
    <title>地图围栏设置</title>
  </head>
  <body style="height: 100%; margin: 0; position: relative;">
    <div id="container" style="width: 100%; height: 100%;"></div>
    <div class="submit" onclick="submit()">提交</div>
    <div class="reset" onclick="reset()">重置</div>
    <!-- built files will be auto injected -->
  </body>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
      /*<![CDATA[*/
    //通过某些方式（点击按钮）结束编辑最终取points里的数据传到后台
    //checkPointInPoly方法为判断点是否在围栏内（点在围栏边界线上也算在内） 参数判断点的经纬度和围栏points

    var map, editor, points;
    var checking = false;

    window.onload = function () {
        // 初始化围栏回填
        getMapData();
    }
     
    //调用本函数，激活编辑工具绘制状态，开始绘制
    function drawing_polygon(){
        editor.setActiveOverlay("polygon133");
    }
     
    //程序入口
    function initMap(defaultPath) {
        // 初始化地图
        if (null!=defaultPath && defaultPath.length>0){
            map = new TMap.Map("container", {
                zoom: 14, // 设置地图缩放级别
                center: new TMap.LatLng(defaultPath[0].lat,defaultPath[0].lng) // 定位初始化坐标
            });
        } else {
            map = new TMap.Map("container", {
                zoom: 14, // 设置地图缩放级别
                center: new TMap.LatLng(22.633659,113.819561) // 设置地图中心点坐标
            });
        }

        map.on('click', (e) => {
            if (checking) {
                console.log(checkPointInPoly(e.latLng.lng, e.latLng.lat, points));
            }
        });
         
        // 初始化几何图形及编辑器
        if (defaultPath) {
            editor = new TMap.tools.GeometryEditor({
                map, // 编辑器绑定的地图对象
                overlayList: [ // 可编辑图层
                        {
                            overlay: new TMap.MultiPolygon({
                                map,
                                styles: {
                                    highlight: new TMap.PolygonStyle({
                                        color: 'rgba(255, 255, 0, 0.6)'
                                    })
                                },
                                geometries: [
                                    {
                                        paths: defaultPath
                                    }
                                ]
                            }),
                            id: 'polygon',
                            selectedStyleId: 'highlight'
                        }
                    ],
                actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
                activeOverlayId: 'polygon', // 激活图层
                selectable: true, // 开启点选功能
                snappable: true // 开启吸附
            });
        }
        else {
            editor = new TMap.tools.GeometryEditor({
                map, // 编辑器绑定的地图对象
                overlayList: [ // 可编辑图层
                    {
                        overlay: new TMap.MultiPolygon({
                            map,
                            styles: {
                                highlight: new TMap.PolygonStyle({
                                    color: 'rgba(255, 255, 0, 0.6)'
                                })
                            },
                        }),
                        id: 'polygon',
                        selectedStyleId: 'highlight'
                    }
                ],
                actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
                activeOverlayId: 'polygon', // 激活图层
                selectable: true, // 开启点选功能
                snappable: true // 开启吸附
            });
        }
        
 
        // 监听绘制结束事件，获取绘制几何图形
        editor.on('draw_complete', (geometry) => { 
            points = geometry.paths;
            checking = true;
            editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
        });

        editor.on('adjust_complete', (geometry) => { 
            points = geometry.paths;
        });
    }

    function reset () {
        document.getElementById('container').innerHTML = '';
        initMap();
    }

    function submit () {
        //操作points给后台
        console.log(points);
        var url = "/mapSave";
        $.ajax({
            url: url,
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(points),
            success: function (result) {
                if ('ok'==result.msg){
                    alert("提交成功")
                } else {
                    alert("提交失败")
                }
            }
        })
    }

    function getMapData() {
        var url = "/getMapData";
        $.ajax({
            url: url,
            type: 'GET',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                console.log(result.data)
                if ('ok'==result.msg){
                    points = result.data
                    if (points && points.length > 2) {
                        let paths = [];
                        for (let i = 0; i < points.length; i++) {
                            let item = points[i];
                            paths.push(new TMap.LatLng(item.lat, item.lng));
                        }
                        initMap(paths);
                    }
                    else {
                        initMap();
                    }
                }
            }
        })
    }

    //检测点位是否在围栏内
    function checkPointInPoly(ALon, ALat, APoints) {
        var iSum = 0,
            iCount;
        var dLon1, dLon2, dLat1, dLat2, dLon;
        if (APoints.length < 3) return false;
        iCount = APoints.length;
        for (var i = 0; i < iCount; i++) {
            if (i == iCount - 1) {
                dLon1 = APoints[i].lng;
                dLat1 = APoints[i].lat;
                dLon2 = APoints[0].lng;
                dLat2 = APoints[0].lat;
            } else {
                dLon1 = APoints[i].lng;
                dLat1 = APoints[i].lat;
                dLon2 = APoints[i + 1].lng;
                dLat2 = APoints[i + 1].lat;
            }
            //over-line检测
            if (((ALat >= dLat1) && (ALat < dLat2)) || ((ALat >= dLat2) && (ALat < dLat1))) {
                if (Math.abs(dLat1 - dLat2) > 0) {
                    dLon = dLon1 - ((dLon1 - dLon2) * (dLat1 - ALat)) / (dLat1 - dLat2);
                    if (dLon < ALon)
                        iSum++;
                }
            }
        }
        if (iSum % 2 != 0)
            return true;
        return false;
    }

      /*]]>*/
</script>

<style>
    .submit {
        position: absolute; 
        width: 160px; 
        height: 40px; 
        line-height: 40px; 
        bottom: 50px; 
        left: calc(50% - 90px); 
        margin-left: -80px; 
        background:linear-gradient(90deg,rgba(246,169,0,1) 0%,rgba(255,135,0,1) 100%); 
        color: white;
        text-align: center;
        border-radius: 5px;
        z-index: 999999;
        cursor: pointer;
    }

    .reset {
        position: absolute; 
        width: 160px; 
        height: 40px; 
        line-height: 40px; 
        bottom: 50px; 
        left: calc(50% + 90px); 
        margin-left: -80px; 
        background:linear-gradient(90deg,rgba(246,169,0,1) 0%,rgba(255,135,0,1) 100%); 
        color: white;
        text-align: center;
        border-radius: 5px;
        z-index: 999999;
        cursor: pointer;
    }
</style>

</html>
初始化和提交
判断是否在围栏内