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常用控件的添加与删除（鹰眼、工具条、比例尺）