问Zeppelin notebook不支持单叶多边形法
EN

Stack Overflow用户

提问于 2019-03-25 08:04:43

回答 1查看 223关注 0票数 1

我正在和Spark一起开发Zeppelin笔记本电脑。我正在使用Leaflet来创建地图可视化，也用于创建多边形。这是我想在Zeppelin笔记本上运行的例子：

%angular        
   <!DOCTYPE html>
   <html>
   <head>
   <title>Quick Start - Leaflet</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
   </head>
   <body>
   <div id="mapid" style="width: 600px; height: 400px;"></div>
   <script>
   var mymap = L.map('mapid').setView([51.505, -0.09], 13);
               L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
               maxZoom: 18,
               attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
              '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
              'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
               id: 'mapbox.streets'
   }).addTo(mymap);

   L.marker([51.5, -0.09]).addTo(mymap)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

   L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");

   L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
   ]).addTo(mymap).bindPopup("I am a polygon.");


 var popup = L.popup();

</script>
</body>
</html>

只有标记属性工作正常，而圆和多边形API在地图上不显示任何输出。控制台日志中没有错误。我还浏览了这个链接http://datasystemslab.github.io/GeoSpark/download/zeppelin/，上面写着“齐柏林飞艇的传单JS中有一个问题”。我不知道这里发生了什么，因为没有错误日志。

apache-zeppelin

leaflet

回答 1

Stack Overflow用户

发布于 2019-07-19 09:34:27

默认情况下，段落中的所有svg标签都是100%大小。

您可以按如下方式对其进行修改。

 %angular        
   <!DOCTYPE html>
   <html>
   <head>
   <title>Quick Start - Leaflet</title>
   <style>
        #mapid svg.leaflet-zoom-animated {
            width: auto;
        }
   </style>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
   </head>
   <body>
   <div id="mapid" style="width: 600px; height: 400px;"></div>
   <script>
   var mymap = L.map('mapid').setView([51.505, -0.09], 13);
               L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
               maxZoom: 18,
               attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
              '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
              'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
               id: 'mapbox.streets'
   }).addTo(mymap);

   L.marker([51.5, -0.09]).addTo(mymap)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

   L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");

   L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
   ]).addTo(mymap).bindPopup("I am a polygon.");


 var popup = L.popup();

</script>
</body>
</html>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55329765

复制

相似问题

问Zeppelin notebook不支持单叶多边形法
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zeppelin notebook不支持单叶多边形法EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zeppelin notebook不支持单叶多边形法
EN