MVT图层

使用 AMap.MapboxVectorTileLayer 插件提供了简易矢量瓦片图层此图层可以使用标准的 MVT 瓦片服务作为数据源。

源代码编辑器

 <!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>MVT图层</title>
 <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.MapboxVectorTileLayer"></script>
 <style>
 html,
 body,
 #container {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 }
 </style>
</head>
<body>
<div id="container"></div>
<script>
 var map = new AMap.Map('container', {
 	center: [120.101743, 30.241665],
 	zoom: 10.5,
 mapStyle: 'amap://styles/whitesmoke',
 showBuildingBlock: false,
 showIndoorMap: false,
 showLabel: true,
 viewMode: '3D',
 	});
 var mvtLayer = new AMap.MapboxVectorTileLayer({
 zIndex: 9,
 opacity: 1,
 url: 'https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?key=您申请的key值&z=[z]&x=[x]&y=[y]&size=512&id=0eaa4f40-b0be-11ec-a2c0-8dc57681093d',
 dataZooms: [1, 18],
 tileSize: 256,
 styles: {
 polygon: {
 sourceLayer: 'default',
 color: 'rgba(62,110,255,0.3)',
 borderColor: '#3E6EFF',
 borderWidth: 2,
 visible: 1
 },
 line: {
 sourceLayer: 'default',
 color: '#3E6EFF',
 lineWidth: 2,
 visible: 1
 },
 point: {
 sourceLayer: 'default',
 radius: 6,
 color: '#3E6EFF',
 borderColor: '#FFFFFF',
 borderWidth: 2,
 visible: 1
 }
 },
 });
 map.add(mvtLayer);
 var getMvtIds = (features) => {
 const ids = new Set();
 for (const key in features) {
 const curFeature = features[key];
 if (curFeature.length > 0) {
 curFeature.forEach((item) => {
 ids.add(item.properties.gid);
 });
 }
 }
 return Array.from(ids);
 };
 	mvtLayer.on('mousemove', (e) => {
 const ids = getMvtIds(e.features);
 const injection = [ids, '#3E6EFF', 'rgba(62,110,255,0.3)', '#FC3E3E', 'rgba(252,62,62,0.3)'];
 function color({ gid }, injection) {
 return injection[0].includes(gid) ? injection[3] : injection[1];
 }
 mvtLayer.setStyle({
 point: {
 injection,
 color
 },
 line: {
 injection,
 color
 },
 polygon: {
 injection,
 color: function ({ gid }, injection) {
 return injection[0].includes(gid) ? injection[4] : injection[2];
 },
 borderColor: color,
 },
 })
 });
</script>
</body>
</html>
 
 

控制台

清空

示例中心常见问题

MVT图层

使用 AMap.MapboxVectorTileLayer 插件提供了简易矢量瓦片图层 此图层可以使用标准的 MVT 瓦片服务作为数据源。

使用 AMap.MapboxVectorTileLayer 插件提供了简易矢量瓦片图层此图层可以使用标准的 MVT 瓦片服务作为数据源。