如何将徽标附加到传单地图？
How to attach a logo to a leaflet map?
我有一张带有一些互动功能的传单地图，我只想在地图的左上角添加一个固定的标志。
这是我的代码：https://codepen.io/paul-k/pen/OJWYaxw
我曾尝试使用坐标，但事实是，当您切换到地图的其他部分时，徽标会消失。
我不知道如何在地图的左上角固定一个不会移动的标志！
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="description" content="Canvas Flowmap Layer with LeafletJS." />
<title>SG Cloud platform map </title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6/dist/leaflet.css" />
<link href="main.css" rel="stylesheet">
<link href="monscript.js" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="interface_container">
<div class="interface_title">How SG Cloud Platform</div>
<div class="interface_title">works ?</div>
<button id="Regions" class="btn-square orange-border" data-target="#square1">Regions</button>
<button id="az" class="btn-square blue-border" data-target="#square3">Availability Zones</button>
<button id="aboutsg" class="btn-square" data-target="#square2">About SG Cloud Platform</button>
<button id="showLines" class="btn-lines">Network</button>
<!-- <button id="marcoussis" class="btn-tp" data-long="48.633331" data-lat="2.23333">Marcoussis DC</button>
<button id="Seclin" data-long=" 50.549999" data-lat="3.03333" class="btn-tp">Seclin DC</button>
<button id="Tigery" class="btn-tp" data-long="48.633331" data-lat="2.5">Tigery DC</button> -->
</div>
<div id="legende_container">
<div class="legende_item">
<div class="icon orange-background"></div>
<p>Regions</p>
</div>
<div class="legende_item">
<div class="icon blue-background"></div>
<p>Availabilty Zones</p>
</div>
<div class="legende_item">
<div class="hr"><hr /></div>
<p>Network</p>
</div>
</div>
<div class="square-info blue-border" id="square-paris">
<a href="#" class="close-classic"></a>
<div class="content">
<h3>Paris</h3>
<h5>3 Availabilty Zones</h5>
<img class="img-fluid" src="https://images.unsplash.com/photo-1471874708433-acd480424946?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80"/>
</div>
</div>
<div class="square-info blue-border" id="square-asie">
<a href="#" class="close-classic"></a>
<div class="content">
<h3>Asia</h3>
<h5>5 Availabilty Zones</h5>
<img class="img-fluid" src="https://images.pexels.com/photos/683419/pexels-photo-683419.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>
</div>
<div class="square-info blue-border" id="square-north">
<a href="#" class="close-classic"></a>
<div class="content">
<h3>North</h3>
<h5>1 Availabilty Zones</h5>
<img class="img-fluid" src="https://images.unsplash.com/photo-1514918956881-335d75e3c0c2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"/>
</div>
</div>
<div class="square-info blue-border" id="square-amer">
<a href="#" class="close-classic"></a>
<div class="content">
<h3>Amer</h3>
<h5>12 Availabilty Zones</h5>
<img class="img-fluid" src="https://images.unsplash.com/photo-1552337125-0c43e12efec0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80"/>
</div>
</div>
<div class="square-info blue-border" id="square3">
<a href="#" class="close-classic"></a>
<div class="content">
<p><span style="color: #000000;"><strong><span>Unique Physical location in a region.</span></strong></span></p>
<p><span style="color: #000000;"><strong><span>Each Availability area consists of one or more datacenters equipped with iondependant power, cooling and networking. A Zone is a deployment area for infrastructure resources provided by platform.</span></strong></span></p>
<p><span style="color: #000000;"><strong><span>Availability Zones are sufficiently close to be interconnected with large bandwidth and low latency network links which allow synchronous data replication.</span></strong></span></p><p><span style="color: #000000;"><strong><span> In the meantime, they are sufficiently far to be considered as a single domaine failure. Incidents on Datacenter: Power, cooling, fire or floods, can isolate a zone or make a zone inoperative without impacting another zone.</span></strong></span></p><p><span style="color: #000000;"><strong><span>A distance between zone comprised within a range of 20 to 50 km is usually observed.</span></strong></span></p>
<!-- <p><span style="color: #000000;"><strong><span>They are represented on the map with a blue circle<img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3AOrange_circle_100%2525.svg&psig=AOvVaw3nKZsnnZcngsj9VJ5kZe7b&ust=1615985347599000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPDoy9fstO8CFQAAAAAdAAAAABAD" alt="" /> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvmJvTkH1_4QWBGXgPlzJ2PJQKqGaZvBJq-w&usqp=CAU" alt="" width="45" height="45" /></span></strong></span></p> -->
.</div>
</div>
<div class="square-info orange-border" id='square1'>
<a href="#" class="close-classic"></a>
<div class="content">
<p><strong><span>A region is a collection of availability zones.</span></strong></p>
<p><strong><span>A set of datacenters deployed within a perimeter interconnected via a dedicated low latency regional network.</span></strong></p><p><strong><span> Regions are sufficiently far from each others not to suffer from hazards with wide geographical impacts like earthquakes, tornados, electrical grid failures, act of wars..</span></strong></p><p><span><strong> Regions are too far to allow synchronous data replication.</span></strong></p>
<!-- <p style="text-align: center;"><strong><span>They are represented on the map with an Orange circle <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAflBMVEX7jAD////7iQD7gwD7hQD7iAD7ggD7jgD+59L//vv+6dX9wYz/9+/7lCP+27z7kRL8qFf+5cz8vIH9x5n8sHH8nz7/+/P+79/8rmX907D7mzf+4MX9zaP8tHH90ar/8uj8qlv8uHn7mC38plD91rj7kx39wo38sGr8plH7mSiz6HQMAAAHmElEQVR4nO2dW3uqOhCGzUlEBU+ltRVrWV328P//4A7LjVgIIYEEkrHfnTdt3meSmclMSCYIuiZjD8C6fgn91y+h//olNKDwtInT7cM6+Q4YzcWC72T9sE3jzSm0/++tEj7O0uN7xAihjGGMJ6X4L8YoISx6P6azR5uDsEUYztJ9MOVot1wiYQ46Dfbp3JY5rRA+pV8TQtvYfnBSMvlKn2wMxjhhGGcBabWc2JokyGLjpjRMGO8xZR3oCjGK97HZIZkk3Byx1tRsMCXFx43BURkjXO5WpI/1bsXIarc0NTBDhPPPXpNTAEk/52aGZoTwkJD+s7MqTJKDicEZIHyOLPBdGKNnBwhfJ9QK3kV00puxJ2F8tsn3j/HcM3r0Ipy/EMt8uchLL5/Tg3C5t7T+qsJk3yN2dCfcGY4PMjG6G5xwFtlegD9Fo9mwhNlAE7QUJtmAhPPVcBO0FFt18jhdCD8GN+BFmHRZjfqEy2TYFXgrmug7VW3CAx7HgBdhrJ2r6hIupiPy5Zou7BK+DZHEyEXeLBIuozF8aFUs0lqMOoSzUZdgKYx1or8GYTz+DC1ENPYb6oTp2D7mVtPUPOHCHQvmIsouVZUwcwuQI2ZmCY/j5TFNokeThA4CciuqISoRZi4Ccitmpgi3rq3BQkruRoFw5yogR1TYTrUTPrsUB6uatpdTWwk3LgNyK7a2qdoITy7k2jKxUz/CcOVGst0sfG7pGrcQrl03ITfiug/hws1A+FMtMUNKeHDbyxSaSr2NjHDp+hoshGWbfhlh4g1h0o3ww4dFeJGscdNMOHc3WauLNBf8mwlXY49aR3ilT7h1PxLeim51Cb2ao7ka52kT4R9f/Ggh/EePcOePHy3U5E/FhEv/ADmiOO6LCd98m6O5mLhlIySc+eZmLiLCdoaQ8MVHEzY5GxGhQy0YPQkbNiLC89gj7ayzGuGrj470IioovQkIg7HH2UOBCuGzvyYUGrFOGI09yl6K2gm9daQX1d1pjdDTWFgIv7QReprOlKolNlXCvd8m5Eb8lBMufTchN+JSSrjzq3YhEttJCb0qPzVoJSPc+D9Jay3Fn4RH3/1MLnZsJgz9X4W5WNhIGPuckpaicSOh98HwIrxvIgxhAHLEsIHwAMGT5iKHBsIMhqPhriZrIBx7YOYUiAmfoExSPk2fhIQpjFiRi6ZCwjUUV8qd6VpEGI49LKMKBYTe9URlulmIJaHHheC66KuAEMS+otDN/qIkhLD5LXWuE4Z+nGFT1TSsEXpfRvyp8mjGlRCUo7l1NVfCBZS0+yK2qBG+Q3KlPKt5rxH63XKqK6oSAilClbru8wvCEyxXyp3pqUIIohZ8q2tduCD8CytY8HDxt0KYQluHLK0QenZgtl1sWyEEU2crdK23FYRAyt2lroXvgtCbbytUdf0GoyD8HntEpoW/K4Q+H/USa1UhHHs8FlQhhLYM+TStEEILFjxcVAihJW08bbs7G8Jfh2OPx4IqhLDqwbmq8RB+TgM/L4W/t4C/P4S/x4dfp4Ffa4NfL4Vf8wZzLrFQrW8Bv/eEvmAZUdA/hN8Dht/Hh3YWY1YjhH+eBtgeuPw0COi5Niw61wbK1QjPJgI65t1wvhT+GWH457zv4Kw+oIXY8L0FpLo3EhOCqbc1fvcE/9s1MPv8xu8PoRS+m78hvYPvgIEco5V8yw1jfyH7Hh9GXVh6pwKIbbD0Xow7uNsE/v00/ofEtjuG/C8qtt4TBf+urzu4r83zJpTCnXt3cG+i1weile6+9Lk0fFMIlhHCv4PWX3eqfI+wf1fOX1SPhY2EniY2Gvd5+3knO9a4k/0O7tWH/zaCh85G930L/+7j0X6jBG39mqf678wg5Pyrebfq8laQX/O003tPPvnTbm92efQNRtd31zx6O++xI6E37x8eZBBSQk/esPyQMsgJ4b9DisKz62ux71uy8N8Ddr6lKH9lVYkQ/rvcd/C2Ot9muIrY8taxOiHK3AyLNFMZvBIhOrpoRXJsH7gyITq6Z0WqBqhKiDLXrEgyxZGrEqKFW4hKTkaPEKUuxcVp2j5gbUKXGjbCFkx/QjTDbqThGAsbFAYI0fLsQh7OInH53gQh3y+OP1OJuAFjihAtxvY3U2Un2pEQHUZdjBhLazJGCNEyGS+/oYnWEuxImG+nxjEjVtksGSFE89UYPpWtmkv3pgnzNHVoM2LlRNQMIZpFw65GGulEeROEeeNmuKnKZK0Xa4RouR9oqmKy13ehJgi5x3kZIsUhL508jBFCvt84216O9Kyxj7BAiNDrxCYjnbQXRG0TIvQcWVqPmES9+YwQ8lw1scCISaKdg4pkhJD7nE9iNnYw+tnLv5QyRMhjx25lDJKR1a5HfPgpY4RcmyOm/Wcr/xvH1oaShkwScsV73CvVYRTve0aHqgwTIhTGWUBYF1NiRoIsbuno6ss4Ya6n9GtCtCYspmTylT61/2l9WSHkCufpPpgS2mpNzCiZBp/p3Ljx/pctwn96nKXb94gRDsowvinw5D8YRyMset+mM9mBn96ySnhReNrE6fZhnXyfA24yPAnO38n6YZvGm5Mtw91oAMKR9Uvov34J/dcvof/6D09Wb+om8Y2LAAAAAElFTkSuQmCC" alt="" width="53" height="53" /></span></strong></p> -->
</div>
</div>
<div class="square-info" id="square2">
<a href="#" class="close-classic"></a>
<div class="content"><p><strong>The cloud Platform delivers infrastructure services in several geographical areas to respond to following challenges:</strong></p>
<ul>
<li><strong> Proximity of Business application with end-users for performance reasons.</strong></li>
<li><strong> Regulation rules which impose to host some infrastructure component within countries. </strong></li>
<li><strong> Resiliency of vital or critical applications between distant sites.</strong></li>
</ul>
<p><strong>The structure of Cloud Platform architecture across the world follows 3 main principles: </strong><strong> </strong></p>
<ul>
<li><strong> Cloud Platform services are delivered in geographical areas, availability zones and regions, in the same way Cloud Service providers (CSP) do. </strong></li>
<li><strong> Our customers interact with Cloud Platform services in the same way whatever the geographical areas is.</strong></li>
<li><strong> In each geographical area, Cloud Platform services respect local regulation rules.</strong></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/leaflet" type="text/javascript"></script>
<script src="https://unpkg.com/leaflet-ant-path" type="module"></script>
<script src="https://unpkg.com/esri-leaflet@2.3/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/leaflet-ant-path@1.3.0/dist/leaflet-ant-path.js"></script>
<script src="https://unpkg.com/@tweenjs/tween.js@18.5/dist/tween.umd.js"></script>
<!-- then load CanvasFlowMapLayer -->
<script src="../../src/CanvasFlowmapLayer.js"></script>
<script src="https://unpkg.com/papaparse@5.1/papaparse.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var map = L.map('map');
if (L.Browser.mobile) {
map.setView([15, -21.95], 20);
} else {
map.setView([0, 0], 2);
}
L.esri.basemapLayer('DarkGray').addTo(map);
Papa.parse('../csv-data/Flowmap_Cities_one_to_many.csv', {
download: true,
header: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results) {
var geoJsonFeatureCollection = {
type: 'FeatureCollection',
features: results.data.map(function(datum) {
return {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [datum.s_lon, datum.s_lat]
},
properties: datum
}
})
};
var oneToManyFlowmapLayer = L.canvasFlowmapLayer(geoJsonFeatureCollection, {
originAndDestinationFieldIds: {
originUniqueIdField: 's_city_id',
originGeometry: {
x: 's_lon',
y: 's_lat'
},
destinationUniqueIdField: 'e_city_id',
destinationGeometry: {
x: 'e_lon',
y: 'e_lat'
}
},
pathDisplayMode: 'selection',
animationStarted: true,
animationEasingFamily: 'Cubic',
animationEasingType: 'In',
animationDuration: 2000
}).addTo(map);
map.flyTo([40.737, -73.923], 20);
oneToManyFlowmapLayer.on('click', function(e) {
if (e.sharedOriginFeatures.length) {
oneToManyFlowmapLayer.selectFeaturesForPathDisplay(e.sharedOriginFeatures, 'SELECTION_NEW');
}
if (e.sharedDestinationFeatures.length) {
oneToManyFlowmapLayer.selectFeaturesForPathDisplay(e.sharedDestinationFeatures, 'SELECTION_NEW');
}
});
oneToManyFlowmapLayer.selectFeaturesForPathDisplayById('s_city_id', 562, true, 'SELECTION_NEW');
}
});
var map = L.map('map').setView([48.866667, 2.33333], 6);
</script>
<script>
function showSquareInfo(square) {
console.log("yeay")
$('.square-info').hide()
$($(square).attr("data-target")).show();
$($(square).attr("data-target")).addClass('slide')
// $($(square).attr("data-target"))
}
function hideSquareInfo(square) {
$(square).removeClass('slide').hide();
}
var groupCircle1 = L.featureGroup();
var groupCircle2 = L.featureGroup();
L.circle([48.6333, 2.2333], {
color: "#ffa54b",
fillColor: "#ffa54b",
fillOpacity: 0.5,
radius: 180000.0
}).addTo(groupCircle1);
L.circle([22.3669692, 114.1193492], {
color: "#ffa54b",
fillColor: "#ffa54b",
fillOpacity: 0.5,
radius: 200000.0
}).addTo(groupCircle1);
L.circle([ 40.779897, -73.968565], {
color: "#ffa54b",
fillColor: "#ffa54b",
fillOpacity: 0.5,
radius: 170000.0
}).addTo(groupCircle1);
L.circle([ 50.55, 3.0333], {
color: "#ffa54b",
fillColor: "#ffa54b",
fillOpacity: 0.5,
radius: 180000.0
}).addTo(groupCircle1);
L.circle([22.2834783, 114.2719944], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5 ,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([22.3669692, 114.1193492], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([48.6333, 2.2333], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([50.55, 3.0333], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([48.639413, 2.5070883], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([40.712784, -74.005941], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 35000.0
}).addTo(groupCircle2);
$(document).on('ready', function () {
$(".btn-square").on('click', function () {
showSquareInfo(this);
var group_show = this.id == "Regions" ? groupCircle1 : this.id == "az" ? groupCircle2 : null;
var group_hide = this.id == "Regions" ? groupCircle2 : this.id == "az" ? groupCircle1 : null;
if (group_hide != null && group_show != null) {
if(map.hasLayer(group_hide)){
map.removeLayer(group_hide);
}
map.addLayer(group_show);
}
})
$(".btn-tp").on('click', function() {
var that = this;
map.flyTo([
$(that).attr("data-long"),
$(that).attr("data-lat")
], 12);
})
$("a.close-classic").on('click', function () {
hideSquareInfo($(this).parent());
})
var markerParis = new L.marker([48.856614, 2.35222193], { opacity: 0.01 }); //opacity may be set to zero
markerParis.bindTooltip("Paris", {
interactive: true,
permanent: true,
className: "zone-marker marker-border orange-border",
direction: 'center'}
);
markerParis.addTo(map);
markerParis.on('click', function(e) {
var latLng = this.getLatLng();
console.log(latLng);
map.flyTo([
latLng.lat,
latLng.lng
], 9);
$('.square-info').hide()
$("#square-paris").show();
$("#square-paris").addClass('slide')
});
var markerAsie = new L.marker([31.230416, 111.766290], { opacity: 0.01 }); //opacity may be set to zero
markerAsie.bindTooltip("ASIA", {
interactive: true,
permanent: true,
className: "zone-marker marker-border orange-border",
direction: 'center'}
);
markerAsie.addTo(map);
markerAsie.on('click', function(e) {
var latLng = this.getLatLng();
console.log(latLng);
map.flyTo([
latLng.lat,
latLng.lng
], 5);
$('.square-info').hide()
$("#square-asie").show();
$("#square-asie").addClass('slide')
});
var markerNorth = new L.marker([50.62925, 3.057256
], { opacity: 0.01 }); //opacity may be set to zero
markerNorth.bindTooltip("North", {
interactive: true,
permanent: true,
className: "zone-marker marker-border orange-border",
direction: 'center'}
);
markerNorth.addTo(map);
markerNorth.on('click', function(e) {
var latLng = this.getLatLng();
console.log(latLng);
map.flyTo([
latLng.lat,
latLng.lng
], 9);
$('.square-info').hide()
$("#square-north").show();
$("#square-north").addClass('slide')
});
var markerAmer = new L.marker([37.090240, -95.712891], { opacity: 0.01 }); //opacity may be set to zero
markerAmer.bindTooltip("Amer", {
interactive: true,
permanent: true,
className: "zone-marker marker-border orange-border",
direction: 'center'}
);
markerAmer.addTo(map);
markerAmer.on('click', function(e) {
var latLng = this.getLatLng();
console.log(latLng);
map.flyTo([
latLng.lat,
latLng.lng
], 4);
$('.square-info').hide()
$("#square-amer").show();
$("#square-amer").addClass('slide')
return true;
});
// L.marker([48.856614, 2.3522219], {
// html: '<p>Hello</p>'
// }).addTo(map);
});
</script>
</body>
</html>
您可以使用 L.Control 创建带有徽标图像的控件/按钮：
L.LogoControl = L.Control.extend({
options: {
position: 'topleft'
//control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control logo-control');
var button = L.DomUtil.create('a', '', container);
button.innerHTML = '<img width="100%" class="logo-control-img" src="https://cdn-public-assets.join.com/2021/02/b3921997-stack-overflow-logo.png">';
L.DomEvent.disableClickPropagation(button);
container.title = "LOGO Description";
return container;
},
});
new L.LogoControl().addTo(map)
我有一张带有一些互动功能的传单地图，我只想在地图的左上角添加一个固定的标志。 这是我的代码：https://codepen.io/paul-k/pen/OJWYaxw 我曾尝试使用坐标，但事实是，当您切换到地图的其他部分时，徽标会消失。 我不知道如何在地图的左上角固定一个不会移动的标志！
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="description" content="Canvas Flowmap Layer with LeafletJS." />
<title>SG Cloud platform map </title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6/dist/leaflet.css" />
<link href="main.css" rel="stylesheet">
<link href="monscript.js" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="interface_container">
<div class="interface_title">How SG Cloud Platform</div>
<div class="interface_title">works ?</div>
<button id="Regions" class="btn-square orange-border" data-target="#square1">Regions</button>
<button id="az" class="btn-square blue-border" data-target="#square3">Availability Zones</button>
<button id="aboutsg" class="btn-square" data-target="#square2">About SG Cloud Platform</button>
<button id="showLines" class="btn-lines">Network</button>
<!-- <button id="marcoussis" class="btn-tp" data-long="48.633331" data-lat="2.23333">Marcoussis DC</button>
<button id="Seclin" data-long=" 50.549999" data-lat="3.03333" class="btn-tp">Seclin DC</button>
<button id="Tigery" class="btn-tp" data-long="48.633331" data-lat="2.5">Tigery DC</button> -->
</div>
<div id="legende_container">
<div class="legende_item">
<div class="icon orange-background"></div>
<p>Regions</p>
</div>
<div class="legende_item">
<div class="icon blue-background"></div>
<p>Availabilty Zones</p>
</div>
<div class="legende_item">
<div class="hr"><hr /></div>
<p>Network</p>
</div>
</div>
<div class="square-info blue-border" id="square-paris">
<a href="#" class="close-classic"></a>
<div class="content">
<h3>Paris</h3>
<h5>3 Availabilty Zones</h5>
<img class="img-fluid" src="https://images.unsplash.com/photo-1471874708433-acd480424946?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80"/>
</div>
</div>
<div class="square-info blue-border" id="square-asie">
<a href="#" class="close-classic"></a>
<div class="content">
<h3>Asia</h3>
<h5>5 Availabilty Zones</h5>
<img class="img-fluid" src="https://images.pexels.com/photos/683419/pexels-photo-683419.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>
</div>
<div class="square-info blue-border" id="square-north">
<a href="#" class="close-classic"></a>
<div class="content">
<h3>North</h3>
<h5>1 Availabilty Zones</h5>
<img class="img-fluid" src="https://images.unsplash.com/photo-1514918956881-335d75e3c0c2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"/>
</div>
</div>
<div class="square-info blue-border" id="square-amer">
<a href="#" class="close-classic"></a>
<div class="content">
<h3>Amer</h3>
<h5>12 Availabilty Zones</h5>
<img class="img-fluid" src="https://images.unsplash.com/photo-1552337125-0c43e12efec0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80"/>
</div>
</div>
<div class="square-info blue-border" id="square3">
<a href="#" class="close-classic"></a>
<div class="content">
<p><span style="color: #000000;"><strong><span>Unique Physical location in a region.</span></strong></span></p>
<p><span style="color: #000000;"><strong><span>Each Availability area consists of one or more datacenters equipped with iondependant power, cooling and networking. A Zone is a deployment area for infrastructure resources provided by platform.</span></strong></span></p>
<p><span style="color: #000000;"><strong><span>Availability Zones are sufficiently close to be interconnected with large bandwidth and low latency network links which allow synchronous data replication.</span></strong></span></p><p><span style="color: #000000;"><strong><span> In the meantime, they are sufficiently far to be considered as a single domaine failure. Incidents on Datacenter: Power, cooling, fire or floods, can isolate a zone or make a zone inoperative without impacting another zone.</span></strong></span></p><p><span style="color: #000000;"><strong><span>A distance between zone comprised within a range of 20 to 50 km is usually observed.</span></strong></span></p>
<!-- <p><span style="color: #000000;"><strong><span>They are represented on the map with a blue circle<img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3AOrange_circle_100%2525.svg&psig=AOvVaw3nKZsnnZcngsj9VJ5kZe7b&ust=1615985347599000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPDoy9fstO8CFQAAAAAdAAAAABAD" alt="" /> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvmJvTkH1_4QWBGXgPlzJ2PJQKqGaZvBJq-w&usqp=CAU" alt="" width="45" height="45" /></span></strong></span></p> -->
.</div>
</div>
<div class="square-info orange-border" id='square1'>
<a href="#" class="close-classic"></a>
<div class="content">
<p><strong><span>A region is a collection of availability zones.</span></strong></p>
<p><strong><span>A set of datacenters deployed within a perimeter interconnected via a dedicated low latency regional network.</span></strong></p><p><strong><span> Regions are sufficiently far from each others not to suffer from hazards with wide geographical impacts like earthquakes, tornados, electrical grid failures, act of wars..</span></strong></p><p><span><strong> Regions are too far to allow synchronous data replication.</span></strong></p>
<!-- <p style="text-align: center;"><strong><span>They are represented on the map with an Orange circle <img src="data:image/png;base64,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" alt="" width="53" height="53" /></span></strong></p> -->
</div>
</div>
<div class="square-info" id="square2">
<a href="#" class="close-classic"></a>
<div class="content"><p><strong>The cloud Platform delivers infrastructure services in several geographical areas to respond to following challenges:</strong></p>
<ul>
<li><strong> Proximity of Business application with end-users for performance reasons.</strong></li>
<li><strong> Regulation rules which impose to host some infrastructure component within countries. </strong></li>
<li><strong> Resiliency of vital or critical applications between distant sites.</strong></li>
</ul>
<p><strong>The structure of Cloud Platform architecture across the world follows 3 main principles: </strong><strong> </strong></p>
<ul>
<li><strong> Cloud Platform services are delivered in geographical areas, availability zones and regions, in the same way Cloud Service providers (CSP) do. </strong></li>
<li><strong> Our customers interact with Cloud Platform services in the same way whatever the geographical areas is.</strong></li>
<li><strong> In each geographical area, Cloud Platform services respect local regulation rules.</strong></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/leaflet" type="text/javascript"></script>
<script src="https://unpkg.com/leaflet-ant-path" type="module"></script>
<script src="https://unpkg.com/esri-leaflet@2.3/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/leaflet-ant-path@1.3.0/dist/leaflet-ant-path.js"></script>
<script src="https://unpkg.com/@tweenjs/tween.js@18.5/dist/tween.umd.js"></script>
<!-- then load CanvasFlowMapLayer -->
<script src="../../src/CanvasFlowmapLayer.js"></script>
<script src="https://unpkg.com/papaparse@5.1/papaparse.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var map = L.map('map');
if (L.Browser.mobile) {
map.setView([15, -21.95], 20);
} else {
map.setView([0, 0], 2);
}
L.esri.basemapLayer('DarkGray').addTo(map);
Papa.parse('../csv-data/Flowmap_Cities_one_to_many.csv', {
download: true,
header: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results) {
var geoJsonFeatureCollection = {
type: 'FeatureCollection',
features: results.data.map(function(datum) {
return {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [datum.s_lon, datum.s_lat]
},
properties: datum
}
})
};
var oneToManyFlowmapLayer = L.canvasFlowmapLayer(geoJsonFeatureCollection, {
originAndDestinationFieldIds: {
originUniqueIdField: 's_city_id',
originGeometry: {
x: 's_lon',
y: 's_lat'
},
destinationUniqueIdField: 'e_city_id',
destinationGeometry: {
x: 'e_lon',
y: 'e_lat'
}
},
pathDisplayMode: 'selection',
animationStarted: true,
animationEasingFamily: 'Cubic',
animationEasingType: 'In',
animationDuration: 2000
}).addTo(map);
map.flyTo([40.737, -73.923], 20);
oneToManyFlowmapLayer.on('click', function(e) {
if (e.sharedOriginFeatures.length) {
oneToManyFlowmapLayer.selectFeaturesForPathDisplay(e.sharedOriginFeatures, 'SELECTION_NEW');
}
if (e.sharedDestinationFeatures.length) {
oneToManyFlowmapLayer.selectFeaturesForPathDisplay(e.sharedDestinationFeatures, 'SELECTION_NEW');
}
});
oneToManyFlowmapLayer.selectFeaturesForPathDisplayById('s_city_id', 562, true, 'SELECTION_NEW');
}
});
var map = L.map('map').setView([48.866667, 2.33333], 6);
</script>
<script>
function showSquareInfo(square) {
console.log("yeay")
$('.square-info').hide()
$($(square).attr("data-target")).show();
$($(square).attr("data-target")).addClass('slide')
// $($(square).attr("data-target"))
}
function hideSquareInfo(square) {
$(square).removeClass('slide').hide();
}
var groupCircle1 = L.featureGroup();
var groupCircle2 = L.featureGroup();
L.circle([48.6333, 2.2333], {
color: "#ffa54b",
fillColor: "#ffa54b",
fillOpacity: 0.5,
radius: 180000.0
}).addTo(groupCircle1);
L.circle([22.3669692, 114.1193492], {
color: "#ffa54b",
fillColor: "#ffa54b",
fillOpacity: 0.5,
radius: 200000.0
}).addTo(groupCircle1);
L.circle([ 40.779897, -73.968565], {
color: "#ffa54b",
fillColor: "#ffa54b",
fillOpacity: 0.5,
radius: 170000.0
}).addTo(groupCircle1);
L.circle([ 50.55, 3.0333], {
color: "#ffa54b",
fillColor: "#ffa54b",
fillOpacity: 0.5,
radius: 180000.0
}).addTo(groupCircle1);
L.circle([22.2834783, 114.2719944], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5 ,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([22.3669692, 114.1193492], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([48.6333, 2.2333], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([50.55, 3.0333], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([48.639413, 2.5070883], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 5000.0
}).addTo(groupCircle2);
L.circle([40.712784, -74.005941], {
color: "#009ADA",
fillColor: "#009ADA",
fillOpacity: 0.5,
radius: 35000.0
}).addTo(groupCircle2);
$(document).on('ready', function () {
$(".btn-square").on('click', function () {
showSquareInfo(this);
var group_show = this.id == "Regions" ? groupCircle1 : this.id == "az" ? groupCircle2 : null;
var group_hide = this.id == "Regions" ? groupCircle2 : this.id == "az" ? groupCircle1 : null;
if (group_hide != null && group_show != null) {
if(map.hasLayer(group_hide)){
map.removeLayer(group_hide);
}
map.addLayer(group_show);
}
})
$(".btn-tp").on('click', function() {
var that = this;
map.flyTo([
$(that).attr("data-long"),
$(that).attr("data-lat")
], 12);
})
$("a.close-classic").on('click', function () {
hideSquareInfo($(this).parent());
})
var markerParis = new L.marker([48.856614, 2.35222193], { opacity: 0.01 }); //opacity may be set to zero
markerParis.bindTooltip("Paris", {
interactive: true,
permanent: true,
className: "zone-marker marker-border orange-border",
direction: 'center'}
);
markerParis.addTo(map);
markerParis.on('click', function(e) {
var latLng = this.getLatLng();
console.log(latLng);
map.flyTo([
latLng.lat,
latLng.lng
], 9);
$('.square-info').hide()
$("#square-paris").show();
$("#square-paris").addClass('slide')
});
var markerAsie = new L.marker([31.230416, 111.766290], { opacity: 0.01 }); //opacity may be set to zero
markerAsie.bindTooltip("ASIA", {
interactive: true,
permanent: true,
className: "zone-marker marker-border orange-border",
direction: 'center'}
);
markerAsie.addTo(map);
markerAsie.on('click', function(e) {
var latLng = this.getLatLng();
console.log(latLng);
map.flyTo([
latLng.lat,
latLng.lng
], 5);
$('.square-info').hide()
$("#square-asie").show();
$("#square-asie").addClass('slide')
});
var markerNorth = new L.marker([50.62925, 3.057256
], { opacity: 0.01 }); //opacity may be set to zero
markerNorth.bindTooltip("North", {
interactive: true,
permanent: true,
className: "zone-marker marker-border orange-border",
direction: 'center'}
);
markerNorth.addTo(map);
markerNorth.on('click', function(e) {
var latLng = this.getLatLng();
console.log(latLng);
map.flyTo([
latLng.lat,
latLng.lng
], 9);
$('.square-info').hide()
$("#square-north").show();
$("#square-north").addClass('slide')
});
var markerAmer = new L.marker([37.090240, -95.712891], { opacity: 0.01 }); //opacity may be set to zero
markerAmer.bindTooltip("Amer", {
interactive: true,
permanent: true,
className: "zone-marker marker-border orange-border",
direction: 'center'}
);
markerAmer.addTo(map);
markerAmer.on('click', function(e) {
var latLng = this.getLatLng();
console.log(latLng);
map.flyTo([
latLng.lat,
latLng.lng
], 4);
$('.square-info').hide()
$("#square-amer").show();
$("#square-amer").addClass('slide')
return true;
});
// L.marker([48.856614, 2.3522219], {
// html: '<p>Hello</p>'
// }).addTo(map);
});
</script>
</body>
</html>
您可以使用 L.Control 创建带有徽标图像的控件/按钮：
L.LogoControl = L.Control.extend({
options: {
position: 'topleft'
//control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control logo-control');
var button = L.DomUtil.create('a', '', container);
button.innerHTML = '<img width="100%" class="logo-control-img" src="https://cdn-public-assets.join.com/2021/02/b3921997-stack-overflow-logo.png">';
L.DomEvent.disableClickPropagation(button);
container.title = "LOGO Description";
return container;
},
});
new L.LogoControl().addTo(map)