Question

我试图混淆至少一周，使用传单的mapbox来做一个非地理地图。

我的第一步是使用maptiler.com构建它，它使用基于传单的平铺代码生成。但我想在这段代码中添加一个Geojson proprites。

我在Mapbox中看到内置了一个geojson弹出窗口。

这就是为什么我想使用我的传单地图代码+ mapbox弹出窗口，这可能吗？

谢谢，

玉

<!DOCTYPE html>
<html>
  <head>
    <title>map</title>
    <meta charset="utf-8"/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />



        <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.ie.css" />
    <![endif]-->
    <script>
    L.mapbox.accessToken = 'pk.eyJ1IjoiamFkZTIyOTMiLCJhIjoiRDdweEFrZyJ9.Yk4XeNmp3SExkU41Z7BU3w';
      function init() {
        var mapMinZoom = 3;
        var mapMaxZoom = 6;
        var map = L.map('map', {
          maxZoom: mapMaxZoom,
          minZoom: mapMinZoom,
          crs: L.CRS.Simple
        }).setView([0, 0], mapMaxZoom);

        var mapBounds = new L.LatLngBounds(
            map.unproject([0, 7680], mapMaxZoom),
            map.unproject([10496, 0], mapMaxZoom));

        map.fitBounds(mapBounds);
        L.tileLayer('{z}/{x}/{y}.png', {
          minZoom: mapMinZoom, maxZoom: mapMaxZoom,
          bounds: mapBounds,
          noWrap: true          
        }).addTo(map);

        // The GeoJSON representing a point feature with a property of 'video' for the Vimeo iframe
var geoJson = {
    features: [{
        type: 'Feature',
        properties: {
            'marker-color': '#f00',
            'marker-size': 'large',
            'marker-symbol': 'rocket',
            video: '<iframe src="//player.vimeo.com/video/106112939" width="380" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/106112939"><h2>How Simplicity Will Save GIS</h2><p>Vladimir Agafonkin</a> from <a href="http://vimeo.com/foss4g">FOSS4G</a> on <a href="https://vimeo.com">Vimeo</a>.</p>',
        },
        geometry: {
            type: 'Point',
            coordinates: [0,0]
        }
    }]
};

var myLayer = L.mapbox.featureLayer().addTo(map);

// Add the iframe in a marker tooltip using the custom feature properties
myLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;

    // Create custom popup content from the GeoJSON property 'video'
    var popupContent =  feature.properties.video;

    // bind the popup to the marker http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 320
    });
});

// Add features to the map
myLayer.setGeoJSON(geoJson);

      }
    </script>
    <style>
      html, body, #map { width:100%; height:100%; margin:0; padding:0; }
      background-color:white;
    </style>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

Answer 1

您似乎在这里提出两个不同的问题。关于非地理地图的原始问题以及关于向传单弹出窗口添加iframe的后续问题。我会尝试解决您的后续问题：

让我们看一下您链接的Mapbox示例（https://www.mapbox.com/mapbox.js/example/v1.0.0/video/）并调整它以使用您想要显示的视频。

如果您已经获得了一些GeoJSON数据，则可以对其进行编辑以包含video属性。让我们看一下Mapbox示例中的GeoJSON代码：

var geoJson = {
    features: [{
        type: 'Feature',
        properties: {
            'marker-color': '#f00',
            'marker-size': 'large',
            'marker-symbol': 'rocket',
            video: '<iframe src="//player.vimeo.com/video/106112939" width="380" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/106112939"><h2>How Simplicity Will Save GIS</h2><p>Vladimir Agafonkin</a> from <a href="http://vimeo.com/foss4g">FOSS4G</a> on <a href="https://vimeo.com">Vimeo</a>.</p>',
        },
        geometry: {
            type: 'Point',
            coordinates: [0,0]
        }
    }]
};

查看video属性？它的值包含iframe代码，该代码将在其对应的地图标记的弹出窗口内结束。我继续将您的YouTube视频中的iframe代码添加到上面的示例中，您可以在jsfiddle上看到它：http://jsfiddle.net/danswick/tcxvpw84/。

您的GeoJSON数据可能没有video属性，但您可以使用文本编辑器或geojson.io添加它。

在我们的示例代码中，我们访问video属性，将其设置为变量，并将其绑定到标记的弹出窗口：

// Create custom popup content from the GeoJSON property 'video'
    var popupContent =  feature.properties.video;

    // bind the popup to the marker http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 320
    });

Answer 2

Mapbox只使用Leaflet的bindPopup方法，该方法标配L.Marker。如果您创建了L.GeoJSON图层，则可以使用onEachFeature L.GeoJSON选项为每个要素添加一个弹出窗口，其中包含一个带有两个参数的函数：feature和{{1 }}。在那里，您可以将弹出窗口绑定到您的功能：

例如，如果您拥有此类功能，则使用名为layer的属性：

name

然后，您可以在将弹出窗口绑定到您的功能时使用该名称值，如下所示：

{
    "type": "Feature",
    "properties": {
        "name": "E"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    }
}

这是关于Plunker的一个工作示例：http://plnkr.co/edit/iPLHqi?p=preview

Answer 3

谢谢，花时间回复。

但实际上我想使用geojson将iframe放在传单弹出窗口中。

像这样：

L.marker(map.unproject([452, 410])).addTo(map).bindPopup("<iframe width="560" height="315" src="https://www.youtube.com/embed/zP71_cXfiu0" frameborder="0" allowfullscreen></iframe>");

但是它不起作用，但是使用相同的语法来完成这项工作：我只是在这个例子中看到，使用geojson它可能会起作用： https://www.mapbox.com/mapbox.js/example/v1.0.0/video/

L.marker（map.unproject（[452,410]））。addTo（map）.bindPopup（＆＃34; https://www.youtube.com/embed/zP71_cXfiu0＆＃34;）;

很抱歉，如果我有点困惑，因为我是设计师和所有这些＆＃34;代码的事情＆＃34;这对我来说是新的：）

Mapbox非地理位置

3 个答案: