使用高德地圖繪製多邊形區域（轉）

時間  2019-11-13
標籤 使用 地圖 繪製 多邊形 區域 简体版
原文   原文鏈接

轉自：http://www.cnblogs.com/mengxingxinqing/p/6087201.htmljavascript

最近遇到一個需求，在網頁上面編輯多邊形的區域，而且須要可以判斷一個點是否在這個多邊形區域裏面。css

看了一下高德地圖的jsapi，簡單的作了一個demo。html

1.你須要一個高德地圖的帳號，註冊地址點擊這裏java

2.登錄進去建立一個應用，這個時候就會給你一個對應的Keyjquery

3.查看高德地圖的的demo，進入示例中心web

4.學習一下左側分類裏面的 點標記 的示例，點標記裏有涉及到高德地圖事件，以及基礎的類。json

5.看完上面的，接下來咱們接着學習折線，多邊形，圓，這裏咱們就能夠接觸到AMap.Polygon這個類，以及高德地圖提供編輯多邊形的類AMap.PolyEditorapi

6.下面咱們就要開始將上面的功能組合起來，進行高德地圖多邊形的編輯了數組

    6.1 首先，我先用點標記在地圖上選中3個點，組成一個最基本的多邊形（三角形）服務器

　

複製代碼 
//用來存儲3個基本點的數組 第一個存點座標 第二個存Marker（點標記）對象
var beginPoints;
var beginMarks ;
//地圖上面的click事件對象
var clickListener ;
//當前繪製的點個數，用來控制前面3個點
var beginNum;
//初始化
function init(){
        beginPoints = [];
        beginMarks = [];
        beginNum = 0;
        clickListener = AMap.event.addListener(map, "click", mapOnClick);
    }
init();
//地圖上面綁定的點擊事件
function mapOnClick(e) {
        // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        beginMarks.push(addMarker(e.lnglat));
        beginPoints.push(e.lnglat);
        beginNum++;
        if(beginNum == 3){
            //處理有了3個點之後，轉化爲多邊形的邏輯
        }
    };

// 實例化點標記
function addMarker(lnglat) {
        
        var marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: lnglat
        });
        marker.setMap(map);
        return marker;
    }
複製代碼

　      在上面的代碼裏須要說一點的是，高德地圖的事件綁定跟java的事件綁定有些相似 clickListener = AMap.event.addListener(map, "click", mapOnClick);

         其中第一個參數是要綁定事件的對象，第二個參數是事件類型，第三個參數是對應是事件函數。取消綁定事件的方法AMap.event.removeListener(clickListener);

    6.2 繪製好3個點以後，構建多邊形對象，綁定對應的多邊形編輯對象

複製代碼 
//在上面的留空處，處理有了3個點之後的邏輯，繼續開始
AMap.event.removeListener(clickListener);
var polygon = createPolygon(beginPoints);
polygonEditor = createEditor(polygon);
clearMarks();
//處理結束

//上面用到的幾個函數
//建立一個多邊形對象
function createPolygon(arr){
        var polygon = new AMap.Polygon({
            map: map,
            path: arr,
            strokeColor: "#0000ff",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#f5deb3",
            fillOpacity: 0.35
        });
        return polygon;
    }
//建立一個多邊形對象的編輯類對象
function createEditor(polygon){
        var polygonEditor = new AMap.PolyEditor(map, polygon);
        polygonEditor.open();
        AMap.event.addListener(polygonEditor,'end',polygonEnd);
        return polygonEditor;
    }
//編輯結束事件
function polygonEnd(res){
        resPolygon.push(res.target);
        alert(resPolygon[resNum].contains([116.386328, 39.913818]));
        appendHideHtml(resNum,res.target.getPath());
        
        resNum++;
        init();
    }
//將多邊形路徑保存到html隱藏域裏
function appendHideHtml(index,arr){
        var strify = JSON.stringify(arr);
        var html = '<input type="hidden" id="index'+index+'" name="paths[]" value="'+strify+'">';
        $('body').append(html);
        console.log(html);
    }

//清除前面的3個點標記
function clearMarks(){
        map.remove(beginMarks);
}
複製代碼

        上面的代碼裏須要主要的主要是 1.高德地圖清除點標記，支持清除一組，按照數組清除。2.PolyEditor這個多邊形編輯對象，主要使用到了open()和close()兩個函數，以及end事件（當調用了close函數後觸發）3.我按照多邊形的次序，將他們append到html的隱藏域中，而且將id使用了index+次序的方式生成。

       而後能夠選擇將隱藏域中的內容提交到服務器，或者作其餘的處理。

       完整demo以下：

 

<!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"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
<input type="button" class="button" value="地圖編輯完成" onClick="closeEditPolygon();"/>
</div>
<script>
var editorTool, map = new AMap.Map("container", {
resizeEnable: true,
center: [116.403322, 39.900255],//地圖中心點
zoom: 13 //地圖顯示的縮放級別
});
var beginNum = 0;
var clickListener ;
var beginPoints;
var beginMarks ;
var polygonEditor;
var resPolygon = [];
var resNum = 0;
init();
function init(){
beginPoints = [];
beginMarks = [];
beginNum = 0;
polygonEditor = '';
clickListener = AMap.event.addListener(map, "click", mapOnClick);

// var str = '[{"J":39.91789947393269,"G":116.36744477221691,"lng":116.367445,"lat":39.917899},{"J":39.91184292800211,"G":116.40658356616223,"lng":116.406584,"lat":39.911843},{"J":39.88616249265181,"G":116.37963272998047,"lng":116.379633,"lat":39.886162}]';
// var arr = json2arr(str);
// createPolygon(arr);
}

function mapOnClick(e) {
// document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
beginMarks.push(addMarker(e.lnglat));
beginPoints.push(e.lnglat);
beginNum++;
if(beginNum == 3){
AMap.event.removeListener(clickListener);
var polygon = createPolygon(beginPoints);
polygonEditor = createEditor(polygon);
clearMarks();
}
};


function createPolygon(arr){
var polygon = new AMap.Polygon({
map: map,
path: arr,
strokeColor: "#0000ff",
strokeOpacity: 1,
strokeWeight: 3,
fillColor: "#f5deb3",
fillOpacity: 0.35
});
return polygon;
}

function createEditor(polygon){
var polygonEditor = new AMap.PolyEditor(map, polygon);
polygonEditor.open();
AMap.event.addListener(polygonEditor,'end',polygonEnd);
return polygonEditor;
}

function closeEditPolygon(){
polygonEditor.close();
}

function polygonEnd(res){
resPolygon.push(res.target);
alert(resPolygon[resNum].contains([116.386328, 39.913818]));
appendHideHtml(resNum,res.target.getPath());

resNum++;
init();
}

function appendHideHtml(index,arr){
var strify = JSON.stringify(arr);
var html = '<input type="hidden" id="index'+index+'" name="paths[]" value="'+strify+'">';
$('body').append(html);
console.log(html);
}

 

function clearMarks(){
map.remove(beginMarks);
}

function json2arr(json){
var arr = JSON.parse(json);
var res = [];
for (var i = 0; i < arr.length; i++) {
var line = [];
line.push(arr[i].lng);
line.push(arr[i].lat);
res.push(line);
};
return res;
}


// 實例化點標記
function addMarker(lnglat) {

var marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: lnglat
});
marker.setMap(map);
return marker;
}

</script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程