leaflet 加载腾讯地图作为底图
问题点：因为腾讯地图是用到加密的GCJ02火星坐标系，跟WGS84是有20-700m的偏移的，所以要用到gcoord纠偏
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Tencent Map</title>
<style>
#map {
height: 1000px;
}
</style>
</head>
<body>
<button onclick="shpbuffer()" style="z-index: 99;">范围搜索</button>
<div id="map"></div>
<!-- 引入腾讯地图 JavaScript API -->
<script src="https://map.qq.com/api/js?v=2.exp&key=腾讯密钥&libraries=convertor"></script>
<!-- 引入 Leaflet 库 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.0/proj4.js"></script>
<!-- 引入 gcoord 库 -->
<script src="https://unpkg.com/gcoord@0.3.2/dist/gcoord.js"></script>
<script>
//var wgs84 = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs';
//var gcj02 = '+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs';
//自定义 腾讯底图的layer
L.TileLayer.TencentTileLayer = L.TileLayer.extend({
initialize: function (param, options) {
var templateImgUrl = "//p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{ry}.jpg"
var templateDemUrl = "//p{s}.map.gtimg.com/demTiles/{z}/{sx}/{sy}/{x}_{ry}.jpg"
var templateUrl = "//rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={ry}&{p}"
var myUrl = (param === "img" ? templateImgUrl : (param === "dem" ? templateDemUrl : templateUrl))
options = L.extend({// 位运算符：a >> b 等价于 Math.floor(a / Math.pow(2, b))，a << b 等价于 Math.floor(a * Math.pow(2, b))
getUrlArgs: (o) => { return { x: o.x, ry: (1 << o.z) - o.y - 1, z: o.z, sx: o.x >> 4, sy: ((1 << o.z) - o.y - 1) >> 4 } },
p: param, subdomains: "0123", minZoom: 0, maxZoom: 23, minNativeZoom: 1, maxNativeZoom: param === "dem" ? 15 : 18
}, options)
L.TileLayer.prototype.initialize.call(this, myUrl, options)
},
getTileUrl: function (coords) {
if (this.options.getUrlArgs) {
return L.Util.template(this._url, L.extend({ s: this._getSubdomain(coords), r: L.Browser.retina ? '@2x' : '' }, this.options.getUrlArgs(coords), this.options))
} else {
return L.TileLayer.prototype.getTileUrl.call(this, coords)
}
},
_setZoomTransform: function (level, center, zoom) {
center = L.latLng(gcoord.transform([center.lng, center.lat], gcoord.WGS84, gcoord.GCJ02).reverse()) // 采用 gcoord 库进行纠偏
L.TileLayer.prototype._setZoomTransform.call(this, level, center, zoom)
},
_getTiledPixelBounds: function (center) {
center = L.latLng(gcoord.transform([center.lng, center.lat], gcoord.WGS84, gcoord.GCJ02).reverse()) // 采用 gcoord 库进行纠偏
return L.TileLayer.prototype._getTiledPixelBounds.call(this, center)
},
})
L.tileLayer.tencentTileLayer = function (param, options) { return new L.TileLayer.TencentTileLayer(param, options) }
var map;
function initMap() {
//leaflet
map = L.map("map", { center: [29.708050, 118.321499], zoom: 15, zoomControl: false, attributionControl: false, doubleClickZoom: false })
tvs1_Layer = L.tileLayer.tencentTileLayer("type=vector&styleid=1")
map.addLayer(tvs1_Layer)
}
// 初始化地图
initMap();
function shpbuffer(){
var geometryData = {
};
axios.post('http://127.0.0../api/gis/tbuffer', geometryData)
.then(function (response) {
// Handle response from the backend
console.log(response);
response.data.features.forEach((res)=>{
var pointarr = res.geometry.coordinates[0]
var polygon = L.polygon(pointarr, {
color: 'red', // 多边形边线颜色
fillColor: 'blue', // 多边形填充颜色
fillOpacity: 0.3 // 多边形填充透明度
}).addTo(map);
})
map.flyTo([36.665646062393186, 117.31700511264272], 13, {
duration: 3 // 动画持续时间，单位为秒
});
})
.catch(function (error) {
// Handle error
console.error(error);
});
}
</script>
</body>
</html>
可参考链接：https://blog.csdn.net/jingjing_n/article/details/127323669
