切图工具：通过js判断语句消除调用切片图片失败信息

最新推荐文章于 2024-08-30 16:24:06 发布

老狼8848

最新推荐文章于 2024-08-30 16:24:06 发布

阅读量328

点赞数

分类专栏：地图切片工具

本文链接：https://blog.csdn.net/bq_cui/article/details/113825317

版权

地图切片工具专栏收录该内容

103 篇文章 17 订阅

订阅专栏

工具说明

工具下载

经常有同学问，共工具默认生成的html文件，其中的js代码调用切片的时候，会出现好多 ERR_FILE_NOT_FOUND 这种错误信息，是怎么回事？

这是肯定的，默认生成js代码，没有判断需要在哪个区域范围需要调用我们生成的切片，那么它默认在所有范围尝试读取切片文件，比如我们仅仅生成了故宫的切片，当我们把地图移到颐和园，js代码仍在尝试读取颐和园的切片，就会出错误提示了。

那么就需要我们加上判断，只在故宫区域读取切片。

可以参看以下腾讯地图代码。

<!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>gaode</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0"/>
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=your_own_key"></script>
<style>
	#container{height:95%;width:100%;}
	#cust_var {position:absolute;bottom:0px;width:100%;height:5%; overflow: hidden; margin:0;}
</style>

</head>
<body>
<div id="container"></div>

<script>
	var layer_std = new AMap.TileLayer(); 

    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:15,
        layers: [
            layer_std
        ],
        center: [116.391404, 39.923113]
        
    });



/*mengban
    var Layer_m = new AMap.TileLayer({
       zIndex:9,
       getTileUrl: function(x,y,z){
		  return 'tiles/tile.jpg'; 
       }
    });
	map.remove(layer_std);
    Layer_m.setMap(map);
mengban*/

    // 经纬度坐标转成平面像素坐标
    function lnglat2pixel(lnglatstr) {
        //if(!lnglatInput.value) return
        var zoom = map.getZoom(); 
        var inputVal = lnglatstr.split(','); // lnglatInput.value.split(',');
        var lnglat = new AMap.LngLat(inputVal[0], inputVal[1]);
        var pixel = map.lnglatToPixel(lnglat,zoom);
        pixel.x = parseInt(pixel.x);
        pixel.y = parseInt(pixel.y);
        //pixelInput.value = pixel;
		return pixel;
    }

    var tilerLayer = new AMap.TileLayer({
       zIndex:10,
       getTileUrl: function(x,y,z){

		  var ltx = Math.floor(lnglat2pixel('116.388743,39.925252').x/256);
		  var lty = Math.floor(lnglat2pixel('116.388743,39.925252').y/256);
		  var rbx = Math.floor(lnglat2pixel('116.404279,39.912021').x/256);
		  var rby = Math.floor(lnglat2pixel('116.404279,39.912021').y/256);

		  if ((x>=ltx) && (x<=rbx) && (y>=lty) && (y<=rby))
		  {
			  //console.log(ltx + '--' + rbx);
			  //console.log(lty + '--' + rby);
			  return /*dir*/'tiles/' + z + '/' + x + '_' + y + '.png'; 
		  }
		  
		  
       }
    });
	tilerLayer.setMap(map);

	//markerinfo_t
	//markerinfo_b

	//getpoi_t
	//getpoi_b

</script>
</body>
</html>