maptalk第一模塊（地圖顯示，平移旋轉，常用控件，同步地圖，添加工具欄，獲取地圖信息）

本文轉載自查看原文 2021-10-11 18:15 944

完整demo在底部，此部分為文字注釋版本
<!DOCTYPE html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>地圖 - 限制地圖區域</title> <style type="text/css"> html,body{margin:0px;height:100%;width:100%} .container{width:100%;height:100%} </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script> <body> <div id="map" class="container"></div>

 <div id="map2" class="map2"></div>

mapCenter:{{mapCenter}}

zoom:{{zoom}}

minZoom:{{minZoom}}

maxZoom:{{maxZoom}}

extent:{{extent}}

bearing:{{bearing}}

</div>



// 地圖實例放在canvas里
<canvas width=600 height=300 id="map" style="border:1px solid"> <script> var map = new maptalks.Map('map', { center: [-0.113049,51.498568], // 地圖中心坐標 zoom: 14, // 縮放比例

 　　　　dragPitch : true, // 是否開始鼠標拖動偏移（左鍵） dragRotate : true, // 是否開啟鼠標拖動旋轉（右鍵或者ctrl+左鍵）

　　　　 zoomControl : true, // add zoom control // 添加縮放比例控件

　　　　seamlessZoom: true,// 細微縮放，官方說由此控制是否使用無縫縮放模式（並未搞清楚有何區別）


 scaleControl : true, // add scale control // 比例尺控件 overviewControl : true, // add overview control // 縮略圖控件

 centerCross : true, // 地圖中心顯示紅色十字符號 baseLayer: new maptalks.TileLayer('base', { urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', subdomains: ['a','b','c','d'], attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>' }), layers : [ new maptalks.VectorLayer('v') ] }); var extent = map.getExtent();// 獲取地圖范圍 // set map's max extent to map's extent at zoom 14 map.setMaxExtent(extent); // 限制最大地圖范圍 map.setZoom(map.getZoom() - 2, { animation : false });// 更改縮放比例 map.getLayer('v') .addGeometry( // 添加新的幾何圖形 new maptalks.Polygon(extent.toArray(), { 新的多邊形 symbol : { 'polygonOpacity': 0, 'lineWidth': 5 } }) );

 function up() { map.panBy([0, -200]);//設置偏移量[x,y] } function down() { map.panBy([0, 200]); } function left() { map.panBy([-200, 0]); } function right() { map.panBy([200, 0]); } function toCoordinate() { var symbol = {　　// 添加的標志樣式，等同於設置單個marker markerType : 'x',  markerLineColor : '#f00', markerLineWidth : 4, markerWidth : 20, markerHeight : 20 }; var coordinate = map.getCenter().add(0.008, 0.008); // 選擇marker的位置 map.getLayer('v') .clear()// 清空之前設置的marker .addGeometry(new maptalks.Marker(coordinate, { 'symbol' : symbol })); //添加新的坐標中心時的marker map.panTo(coordinate); } var toolbar = new maptalks.control.Toolbar({ // 添加自定義工具欄，item是工具欄顯示的內容，click為觸發的事件名 items: [ { item: '↑', click: up }, { item: '↓', click: down }, { item: '←', click: left }, { item: '→', click: right }, { item: 'pan to', click: toCoordinate } ] }).addTo(map);

getStatus(); // 獲取地圖狀態 function getStatus() { var extent = map.getExtent(), // 獲取地圖范圍 ex = [ '{', 'xmin:' + extent.xmin.toFixed(5), ', ymin:' + extent.ymin.toFixed(5), ', xmax:' + extent.xmax.toFixed(5), ', ymax:' + extent.xmax.toFixed(5), '}' ].join(''); var center = map.getCenter(); // 獲取地圖中心點 var mapStatus = [ 'Center : [' + [center.x.toFixed(5), center.y.toFixed(5)].join() + ']', 'Extent : ' + ex, 'Size : ' + map.getSize().toArray().join(),// 獲取地圖的尺寸（即地圖的長寬） 'Zoom : ' + map.getZoom(),// 獲取地圖縮放比例 'MinZoom : ' + map.getMinZoom(),// 獲取地圖最小縮放比例 'MaxZoom : ' + map.getMaxZoom(), // 獲取地圖最大縮放比例 'Projection : ' + map.getProjection().code ];

var center = map.getCenter(); var polygon = new maptalks.Polygon([ center.add(-0.005, 0.005), center.add(0.005, 0.005), center.add(0.005, -0.005), center.add(-0.005, -0.005), // 繪制多邊形需要從第三象限開始繪制 ], { symbol : { polygonFill : '#fff', polygonOpacity : 0.5 } }); //圍繞地圖中心點畫一個多邊形，四個角坐標以中心為基准 map.getLayer('v').addGeometry(polygon); function fitExtent() { // fit map's extent to polygon's // 0 is the zoom offset map.fitExtent(polygon.getExtent(), 0); // 設置為適合給定范圍，並使用可能的最大縮放級別，參數一為給定的范圍，參數二為指定的縮放比例 }

// 限制縮放級別可直接在聲明地圖時添加maxzoom和minzoom或者使用以下方法：

 map.setMinZoom(14).setMaxZoom(14);

// 地圖實例放在canvas里

// var res = (window.devicePixelRatio || (window.screen.deviceXDPI / window.screen.logicalXDPI)) > 1;
// if (res) {
// // retina, see https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
// var canvas = document.getElementById('map');
// var r = 2;
// canvas.width *= r;
// canvas.height *= r;
// canvas.style.cssText += 'width:' + Math.round(canvas.width / r) + 'px;height:' + Math.round(canvas.height / r) + 'px';
// } // 這一部分為官方給的，感覺與canvas的綁定不太相關，即使刪掉也沒有什么影響，可能是為了解決未發現的bug？

var map = new maptalks.Map('map', {
center: [-0.113049, 51.498568],
zoom: 14,
zoomControl: true, // ignored in a canvas container
scaleControl: true, // ignored in a canvas container
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c', 'd'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a> '
})
}); // 這一段即可完成綁定，與div並無不同的樣子

 // 監聽點擊事件

 map.on('click', function (param) { var infoDom = document.getElementById('info'); infoDom.innerHTML = '<div>' + new Date().toLocaleTimeString() + ': click map on ' + param.coordinate.toFixed(5).toArray().join() + '</div>' + infoDom.innerHTML; });

// 利用高德地圖作為地圖

const map = new maptalks.Map('map', {

center: [-0.113049, 51.498568],

zoom: 14,

minZoom: 2,

maxZoom: 20,

centerCross: true,

dragPitch: true,

dragRotate: true,

zoomControl: true,

// seamlessZoom: true,

scaleControl: true,

overviewControl: true,

baseLayer: new maptalks.TileLayer('base', {

urlTemplate: 'http://wprd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&z={z}&x={x}&y={y}&scl=1&ltype=11', // 這里的鏈接控制底圖來源

subdomains: ['01', '02', '03', '04'], // 此處不能繼續用abcd，否則底圖會失效

// attribution: `'© <a href="http://osm.org">OpenStreetMap</a> contributors, ©

// <a href="https://carto.com/">CARTO</a>'`,

}),

// 這里是同步地圖（設置同步地圖時需要設置綁定的元素的寬和高，不然不會顯示。

const map2 = new maptalks.Map('map2', {

center: map.getCenter(),

zoom: map.getZoom(),

draggable : false, // disable draggble

scrollWheelZoom : false, // disable scroll wheel zoom

dblClickZoom : false, // disable doubleclick

baseLayer: new maptalks.TileLayer('base1', {

urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',

subdomains: ['a', 'b', 'c', 'd'],

}),

});

</script> 

</body>

 </html>

第一部分的完整demo

<template>
    <div class="app">
        <div id="map" class="map"></div>
        <div id="map2" class="map2"></div>
        <!-- <canvas id="map" class="map"></canvas> -->
        <div class="text">
            <p>mapCenter:{{mapCenter}}</p>
            <p>zoom:{{zoom}}</p>
            <p>minZoom:{{minZoom}}</p>
            <p>maxZoom:{{maxZoom}}</p>
            <p>extent:{{extent}}</p>
            <p>bearing:{{bearing}}</p>
        </div>
        <div>
        </div>
    </div>
</template>
<script lang="ts">
import * as maptalks from 'maptalks';
import {Component, Vue} from 'vue-property-decorator';
import 'maptalks/dist/maptalks.css'
@Component
export default class App extends Vue {
    private mapCenter: any = '';
    private zoom: any = '';
    private minZoom: any = '';
    private maxZoom: any = '';
    private extent: any = '';
    private bearing: any = '';
    private newMap() {
        // const screen: any = window.screen;
        // const canvas: any = document.getElementById('map');
        // const res = (window.devicePixelRatio || (screen.deviceXDPI / screen.logicalXDPI)) > 1;
        // if (res) {
        //     // retina, see https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
        //     const r: number = 2;
        //     console.log(canvas.width);
        //     canvas.width *= r;
        //     canvas.height *= r;
        //     canvas.style.cssText += 'width:' + Math.round(canvas.width / r) + 'px;height:'
        //     + Math.round(canvas.height / r) + 'px';
        // }
        const map = new maptalks.Map('map', {
            center: [-0.113049, 51.498568],
            zoom: 14,
            minZoom: 2,
            maxZoom: 20,
            centerCross: true,
            dragPitch: true,
            dragRotate: true,
            zoomControl: true,
            // seamlessZoom: true,
            scaleControl: true,
            overviewControl: true,
            baseLayer: new maptalks.TileLayer('base', {
                urlTemplate: 'http://wprd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&z={z}&x={x}&y={y}&scl=1&ltype=11',
                subdomains: ['01', '02', '03', '04'],
                // attribution: `'&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy;
                //  <a href="https://carto.com/">CARTO</a>'`,
            }),
            layers : [
                new maptalks.VectorLayer('v'),
            ],
        });
        const map2 = new maptalks.Map('map2', {
            center: map.getCenter(),
            zoom: map.getZoom(),
            draggable : false,        // disable draggble
            scrollWheelZoom : false,  // disable scroll wheel zoom
            dblClickZoom : false,     // disable doubleclick
            baseLayer: new maptalks.TileLayer('base1', {
            urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c', 'd'],
            // attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            }),
        });

        const toolbar = new maptalks.control.Toolbar({
            items: [{
                item: '上移',
                click: () => map.panBy([0, 200]),
            },
            {
                item: '下移',
                click: () => map.panBy([0, -200]),
            },
            {
                item: '左移',
                click: () => map.panBy([200, 0]),
            },
            {
                item: '右移',
                click: () => map.panBy([-200, 0]),
            },
            {
                item: '適應窗口',
                click: () => {
                    const center = map.getCenter();
                    const polygon = new maptalks.Polygon([
                    center.add(-0.004, -0.004),
                    center.add(-0.012, -0.004),
                    center.add(-0.008, 0),
                    center.add(-0.012, 0.004),
                    center.add(-0.004, 0.004),
                    center.add(0, 0.008),
                    center.add(0.004, 0.004),
                    center.add(0.012, 0.004),
                    center.add(0.008, 0),
                    center.add(0.012, -0.004),
                    center.add(0.004, -0.004),
                    center.add(0.00, -0.008), // 這里的多邊形繪制似乎是由第三象限開始的，如果從第二象限開始則第三象限點位連線會亂
                    ], {
                        symbol: {
                            polygonFill: '#000',
                            polygonOpacity: 0.5,
                        },
                    });
                    map.getLayer('v').addGeometry(polygon);
                    map.fitExtent(polygon.getExtent(), 0);
                },
            }],
        }).addTo(map);
        map.on('moving moveend', (e) => {
            map2.setCenter(e.target.getCenter());
        });
        map.on('rotate', (e) => {
            map2.setBearing(e.target.getBearing());
        });
        map.on('pitch', (e) => {
            map2.setPitch(e.target.getPitch());
        });
        map.on('zooming zoomend', (e) => {
            map2.setCenterAndZoom(e.target.getCenter(), e.target.getZoom());
        });
        map.on('moveend', () => {
            const center = map.getCenter();
            this.mapCenter = center.toFixed(5);
            this.zoom = map.getZoom();
            this.minZoom = map.getMinZoom();
            this.maxZoom = map.getMaxZoom();
            this.extent = map.getExtent();
            this.bearing = map.getBearing();
            const polygon = new maptalks.Polygon([
                center.add(-0.005, 0.005), // 右下
                center.add(0.005, 0.005), // 右上
                center.add(0.008, -0.005), // 右下
                center.add(-0.008, -0.005), // 左下
            ], {
                symbol: {
                    polygonFill: '#fc0',
                    polygonOpacity: 0.1,
                },
            });
            map.getLayer('v').addGeometry(polygon);
        });
        new maptalks.VectorLayer('v1', new maptalks.Marker(map.getCenter()))
      .addTo(map);
    };
    // private getMapInfo() {
    //     // const tooltip = new maptalks.MapTool
    // }
    private mounted() {
        this.newMap();
    }
}
</script>
<style scoped lang="scss">
.app{
    width: 100%;
    height: 100%;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    .map{
        flex: 1;
        width: 100%;
        height: 100%;
    }
    .map2{
        flex: 1;
        width: 100%;
        height: 100%;
    }
    .text{
        position: absolute;
        top:10px;
        left: 50px;
    }
}

</style>

免責聲明！

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

猜您在找 基於隨機定位的地圖信息獲取方式 Vue 使用 Echarts 顯示熱力地圖信息地圖自定義彈窗高德地圖信息窗體鼠標點擊地圖點標記顯示彈窗html 地圖自定義彈窗高德地圖信息窗體鼠標點擊地圖點標記顯示彈窗vue Qt 給QWidget添加工具欄高德地圖信息窗體輪播及多組坐標點添加百度地圖各種控件：地圖平移縮放控件NavigationControl、地圖類型控件MapTypeControl 百度地圖（3）-添加地圖控件 VS2010 MFC中在對話框上添加工具欄以及工具欄提示信息並改變圖標支持256色高德地圖API常用控件的添加與刪除（鷹眼、工具條、比例尺）