要实现这个功能,你需要在MapTalks中设置地图的缩放级别和中心点。以下是一个简单的示例:
1. 首先,创建一个Map对象,并设置其初始缩放级别和中心点。例如,将缩放级别设置为10,中心点设置为经度为116.397428,纬度为39.90923。
var map = new Maptalks.Map("map", { center: [116.397428, 39.90923], zoom: 10, });
2. 然后,添加一个瓦片图层到地图上。
var tileLayer = new Maptalks.TileLayer( "tileLayer", "http://{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}", { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"], attribution: '© <a href="http://www.tianditu.gov.cn/">天地图</a>', }, { maxResolution: 156543.0339283, minResolution: 244.543452665265, maxZoom: 18, minZoom: 2, } ); map.addLayer(tileLayer);
这样,地图就会显示指定范围内的瓦片了。你可以根据需要调整缩放级别和中心点的值。
<!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://unpkg.com/maptalks/dist/maptalks.css"> <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script> <body> <script type="text/javascript" src="boundary.js"></script> <div id="map" class="container"></div> <script> var map = new maptalks.Map('map', { center: [114.26529, 30.60545], zoom: 13, pitch : 56, 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>' }) }); //Jianghan district's boundary, from boundary.js var mask = new maptalks.Polygon(boundary, { 'symbol' : [ { 'lineColor' : '#ccc', 'lineWidth' : 8, 'polygonFillOpacity' : 0 }, { 'lineColor' : '#404040', 'lineWidth' : 6, 'polygonFillOpacity' : 0 } ] }); //Copy the mask to add as mask's outline var outline = mask.copy(); var maskedLayer = new maptalks.TileLayer('masked', { 'urlTemplate' : 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', 'subdomains' : ['a','b','c','d'] }) .setMask(mask) // set boundary as the mask to the tilelayer .addTo(map); //District's name var title = new maptalks.Marker(mask.getCenter(), { 'symbol' : { 'textName' : 'JiangHan District', 'textFaceName' : 'sans-serif', 'textSize' : 32, 'textFill' : '#1bbc9b', 'textHaloFill' : '#fff', 'textHaloRadius' : 5, 'textDx' : -30 } }); new maptalks.VectorLayer('v', [outline, title]).addTo(map); </script> </body></html>
评论可见,请评论后查看内容,谢谢!!!
大家都在找:
maptalks:maptalks官网
发表评论
2023-11-27 08:30:30回复
2023-11-27 13:28:41回复