Question

如何在我的地图上显示岛屿？它们被我的温度数据所覆盖。我无法找到这项特定任务的指南。

这是我的代码

<html>

<style>
#map{ width: 1000px; height: 600px; }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-coverage@0.7.2/leaflet-coverage.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.js"></script>
<script src="https://unpkg.com/covutils@0.6.1/covutils-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/covjson-reader/0.16.3/covjson-reader.min.js"></script>
<script src="https://unpkg.com/leaflet-coverage@0.7.2/leaflet-coverage.min.js"></script>

<body>
  <div id="map"></div>

<script>
var map = L.map(document.getElementById('map'), { center: [10, 0], zoom: 2 })
//var myStyle = {"color": "#ff7800", "weight": 5, "opacity": 0.65};
//L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map)
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'}).addTo(map);


var layers = L.control.layers(null, null, {collapsed: false}).addTo(map)

var layer
CovJSON.read('coverage.covjson').then(function (coverage) {
  layer = C.dataLayer(coverage, {parameter: 'sst'})
    .on('afterAdd', function () {
      C.legend(layer).addTo(map)
      map.fitBounds(layer.getBounds())
    })
    .addTo(map)
  layers.addOverlay(layer, 'sst')
})

map.on('click', function (e) {
  new C.DraggableValuePopup({
    layers: [layer]
  }).setLatLng(e.latlng).openOn(map)
})

</script>

</body>
</html>

下面是地图与数据的相似之处。

Answer 1

对于遇到类似问题的人来说，我找到了一个可以在大约10分钟内完成的合适解决方案。它不是最佳的，但它有效。我最终打印筛选了岛屿的谷歌地图图像，因为它类似于背景。我把它装在油漆里清理图片（去掉土地）。从那里，我上传文件的电源点（油漆没有透明工具），以使水透明。然后，我从谷歌地图获取打印屏幕的坐标后，将此图像作为新图层添加到顶部，以便地理参考图像。

var imageUrl = 'islands.png',
    imageBounds = [[32.801608, -120.450498], [34.076603, -118.305885]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

宣传单 - 如何在我的海面温度数据上显示岛屿？

1 个答案: