AMap編輯折線、多邊形、圓

本文轉載自查看原文 2017-01-05 16:50 4264 地圖API開發

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>編輯折線、多邊形、圓</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值&plugin=AMap.PolyEditor,AMap.CircleEditor"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
    <input type="button" class="button" value="開始編輯折線" onClick="editor.startEditLine()"/>
    <input type="button" class="button" value="結束編輯折線" onClick="editor.closeEditLine()"/>
    <input type="button" class="button" value="開始編輯多邊形" onClick="editor.startEditPolygon()"/>
    <input type="button" class="button" value="結束編輯多邊形" onClick="editor.closeEditPolygon()"/>
    <input type="button" class="button" value="開始編輯圓" onClick="editor.startEditCircle()"/>
    <input type="button" class="button" value="結束編輯圓" onClick="editor.closeEditCircle()"/>
</div>
<script>
    var editorTool, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.403322, 39.900255],//地圖中心點
        zoom: 13 //地圖顯示的縮放級別
    });
    //在地圖上繪制折線
    var editor={};
    editor._line=(function(){
        var lineArr = [
            [116.368904, 39.913423],
            [116.382122, 39.901176],
            [116.387271, 39.912501],
            [116.388258, 39.904600]
        ];
        return new AMap.Polyline({
            map: map,
            path: lineArr,
            strokeColor: "#FF33FF",//線顏色
            strokeOpacity: 1,//線透明度
            strokeWeight: 3,//線寬
            strokeStyle: "solid"//線樣式
        });
    })();
    editor._polygon=(function(){
        var arr = [ //構建多邊形經緯度坐標數組
        [116.403322,39.920255],
        [116.410703,39.897555],
        [116.402292,39.892353],
        [116.389846,39.891365]
        ]
        return new AMap.Polygon({
            map: map,
            path: arr,
            strokeColor: "#0000ff",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#f5deb3",
            fillOpacity: 0.35
        });
    })();
    editor._circle=(function(){
        var circle = new AMap.Circle({
            center: [116.433322, 39.900255],// 圓心位置
            radius: 1000, //半徑
            strokeColor: "#F33", //線顏色
            strokeOpacity: 1, //線透明度
            strokeWeight: 3, //線粗細度
            fillColor: "#ee2200", //填充顏色
            fillOpacity: 0.35//填充透明度
        });
        circle.setMap(map);
        return circle;
    })();
    map.setFitView();
    editor._lineEditor= new AMap.PolyEditor(map, editor._line);
    editor._polygonEditor= new AMap.PolyEditor(map, editor._polygon);
    editor._circleEditor= new AMap.CircleEditor(map, editor._circle);

    editor.startEditLine=function(){
        editor._lineEditor.open();
    }
    editor.closeEditLine=function(){
        editor._lineEditor.close();
    }

    editor.startEditPolygon=function(){
        editor._polygonEditor.open();
    }
    editor.closeEditPolygon=function(){
        editor._polygonEditor.close();
    }

    editor.startEditCircle=function(){
        editor._circleEditor.open();
    }
    editor.closeEditCircle=function(){
        editor._circleEditor.close();
    }
</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ArcGIS Server 中畫點、線、多邊形、圓等的重要代碼 Leaflet學習之路五——動態繪制圖形(點、線、圓、多邊形) OpenCV——基本圖形繪制（橢圓、圓、多邊形、直線、矩形）二分法求凸多邊形的外接圓最大半徑使用Java、Matlab畫多邊形閉合折線圖 PCB 銅皮(Surface)折線多邊形擴大縮小實現(第一節） Leaflet中添加標記、折線、圓圈、多邊形、彈窗顯示點擊處坐標 threejs 繪制多邊形多邊形裁剪 threejs繪制多邊形3