当前位置: 代码迷 >> 综合 >> leaflet 插件使用
  详细解决方案

leaflet 插件使用

热度:64   发布时间:2023-11-18 14:33:16.0

效果图:

插件 Leaflet.ChineseTmsProviders(中国底图底图)我代码中命名为china,放在leaflet.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;L.TileLayer.prototype.initialize.call(this, url, options);}
});L.TileLayer.ChinaProvider.providers = {TianDiTu: {Normal: {Map: "http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}",Annotion: "http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}"},Satellite: {Map: "http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}",Annotion: "http://t{s}.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}"},Terrain: {Map: "http://t{s}.tianditu.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}",Annotion: "http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}"},Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']},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}",Color: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/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}",Cold: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/{z}/{y}/{x}"},Subdomains: []}
};L.tileLayer.chinaProvider = function(type, options) {return new L.TileLayer.ChinaProvider(type, options);
};

插件polylineDecorator.js,可自行下载

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./leaflet.css" /><script src="./leaflet.js"></script><script src="./china.js"></script><script src="./leaflet.polylineDecorator.js"></script>
</head>
<body>
<style>
#mapDiv { height: 300px; }</style>
<div id="mapDiv"></div>
<script>//插件把 定义了多个国内的瓦片图层,我们只需要通过提供的方法访问到相应的图层即可//从插件代码可以看出 需要传入 providerName.mapName.mapType 从插件代码中查找所需要的值var test = L.tileLayer.chinaProvider('Geoq.Normal.Map', {maxZoom: 18,minZoom: 5});//此处可以定义多个图层,并可以再页面中进行选择var baseLayers = {"测试地图":test}var map = L.map("mapDiv", {center: [41.80, 123.43],zoom: 7,layers: [test],zoomControl: false});L.control.layers(baseLayers, null).addTo(map);L.control.zoom({zoomInTitle: '放大',zoomOutTitle: '缩小'}).addTo(map);// 插件使用polylineDecorator.jsvar arrow = L.polyline([[41.80, 123.43], [41.07, 123.00]], {opacity: 1,color: 'firebrick'}).bindPopup('I am red:').addTo(map);//var arrow2 = L.polyline([[41.80, 123.43], [40.13, 124.37]], {opacity: 1,color: 'lightgreen'}).bindPopup('I am green:').addTo(map);var arrow3 = L.polyline([[41.07, 123.00], [40.13, 124.37]], {opacity: 1,color: 'lightgreen'}).bindPopup('I am green:').addTo(map);var arrowHead = L.polylineDecorator(arrow, {patterns: [{ offset: 0, repeat: 10, symbol: L.Symbol.dash({pixelSize: 5, pathOptions: {color: '#000', weight: 1, opacity: 0.2}}) },{ offset: '16%', repeat: '33%', symbol: L.Symbol.marker({rotate: true, markerOptions: {icon: L.icon({iconUrl: './images/icon_plane.png',iconAnchor: [16, 16]})}})}]}).addTo(map);</script>
</body>
</html>

插件大全:https://leafletjs.com/plugins.html