繪製多邊形

使用工具列繪製或刪除多邊形。端點座標顯示方式為 [lng, lat] (x, y)。

範例展示

原始碼

copy 
<!DOCTYPE html>
<html>
<head>
    <title>繪製線段並顯示端點座標 - Map8 Platform Documentation</title>
    <link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
    <link rel="stylesheet" href="https://api.map8.zone/css/gomp-draw.css?key=[YOUR_KEY_HERE]" />
    <style>
        #map{
            height: 400px;
            width: 100%;
        }
        .box{
          background:rgba(0,0,0,.7);
          border-radius: .3em;
          box-shadow: 0 2px 2px rgba(0,0,0,0.2);
          color:#fff;
          left: 1em;
          line-height:1.5em;
          top: 1em;
          padding:.5em 1em;
          position: absolute;
          display: none;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="coordinate"class="box"></div>

    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp-draw.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript">
        gomp.accessToken = '[YOUR_KEY_HERE]';
        var map = new gomp.Map({
            container: 'map', // 地圖容器 ID
            style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
            maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
            center: [121.54885, 25.037853], // 初始中心座標，格式為 [lng, lat]
            zoom: 16, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            speedLoad: false,
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));

        var draw = new gompDraw({
            displayControlsDefault: false,
            controls: {
            polygon: true,
            trash: true
            }
        });
        map.addControl(draw);

        var coordinateContainer = document.getElementById('coordinate');

        map.on('draw.create', updateArea);
        map.on('draw.delete', updateArea);
        map.on('draw.update', updateArea);

        function updateArea(e) {
            var data = draw.getAll();
            coordinateContainer.innerHTML = '';
            if (data.features.length > 0) {
                data.features.forEach(function(feature) {
                    feature.geometry.coordinates[0].forEach(function(coordinate) {
                        coordinateContainer.style.display = 'block';
                        coordinateContainer.innerHTML += '[' + coordinate.join(', ') + '] (' + Math.round(map.project(coordinate).x) + ', ' + Math.round(map.project(coordinate).y) + ')<br />';
                    });
                });
            }
            else {
                coordinateContainer.style.display = 'none';
            }
        }
    </script>
</body>
</html>