引用加载地图的js
L.TileLayer.ChinaProvider = L.TileLayer.extend({
initialize: function(type, options) { // (type, Object)
var providers = L.TileLayer.ChinaProvider.providers;
var parts = type.split('.');
var providerName = parts[0];
var mapName = parts[1];
var mapType = parts[2];
var url = providers[providerName][mapName][mapType];
options.subdomains = providers[providerName].Subdomains;
options.key = options.key || providers[providerName].key;
L.TileLayer.prototype.initialize.call(this, url, options);
}
});
L.TileLayer.ChinaProvider.providers = {
TianDiTu: {
Normal: {
Map: "http://t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
Annotion: "http://t{s}.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}"
},
Satellite: {
Map: "http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
Annotion: "http://t{s}.tianditu.com/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}"
},
Terrain: {
Map: "http://t{s}.tianditu.com/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
Annotion: "http://t{s}.tianditu.com/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}"
},
Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
key: "fbd2f49587c6652cb6e8743a34fc0d37"
},
GaoDe: {
Normal: {
Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
},
Satellite: {
Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
},
Subdomains: ["1", "2", "3", "4"]
},
Google: {
Normal: {
Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
},
Satellite: {
Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
},
Subdomains: []
},
Geoq: {
Normal: {
Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
},
Theme: {
Hydro: "http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}"
},
Subdomains: []
},
OSM: {
Normal: {
Map: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
},
Subdomains: ['a', 'b', 'c']
},
//自己定义
cs: {
Normal: {
Map: "http://localhost:6080/arcgis/rest/services/cs/MapServer/tile/{z}/{y}/{x}",//发布地图的地址
},
Subdomains: []
}
};
L.tileLayer.chinaProvider = function(type, options) {
return new L.TileLayer.ChinaProvider(type, options);
};
html
//地图
var normalm = L.tileLayer.chinaProvider('Geoq.Normal.Gray',{maxZoom:18,minZoom:5}),
normala = L.tileLayer.chinaProvider('Geoq.Normal.Gray',{maxZoom:18,minZoom:5}),
imgm = L.tileLayer.chinaProvider('Google.Satellite.Map',{maxZoom:18,minZoom:5}),
imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion',{maxZoom:16,minZoom:8});
cs = L.tileLayer.chinaProvider('cs.Normal.Map',{maxZoom:16,minZoom:8});//自定义的地图
//
var normal = L.layerGroup([normalm,normala]),
image = L.layerGroup([imgm,imga]),
cst = L.layerGroup([cs,normala]);
var baseLayers = {
"地图":normal,
"影像":image,
"自定义":cst,
}
var map = L.map("map",{
center:[28.16662, 112.967845],
zoom:14,
layers:[image],
zoomControl:false
});
效果图
另一种方式
var mymap = L.map('mapid').setView([31.59, 120.29], 7);
L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 12,
minZoom: 4,
pane: 'overlayPane'
}).addTo(mymap);