如何使用leaflet.js和leaflet.js地图标记？

我们正在为位于不同地点的行业植物建立网络可视化。目前，我们为我们的概述页面使用表格布局。每行代表一个工厂及其最重要的状态和价值。如何使用leaflet.js和leaflet.js地图标记？

现在需要用标记交替显示地图。每个标记的颜色应代表当前状态（绿色= ok，红色=错误，黄色=警告等）。

在我们当前的基于表格的页面中，我们使用knockout.js将viewmodel中的各个工厂属性绑定到表格行（以及其中的相应div等）。只要状态或值发生变化，视图模型的值就会通过信号发生器更新，因此您可以将其视为基于事件的实时状态表示。由于此视图模型已包含我们需要在地图上显示的所有信息，因此我想将小叶标记绑定到视图模型，但我看不出如何实现这一点。问题在于没有可用于data-bind属性的标记的元素。准确地说：我可以为每个工厂添加（静态）标记，但这不是问题，但我无法将它们与数据绑定到视图模型，以动态表示视图模型中的变化值。有没有办法做到这一点？

我真的很喜欢继续传单，因为它完全符合我们的需求。 Web应用程序需要运行在永久与互联网断开的特殊网络中，因此我们需要为自己的网格服务（这对于传单和Maperetive来说非常有用）。如果除传单外还有其他解决方案可以满足我们的需求，请让我知道。谢谢！

更新：这是我的viewmodel的实际json数据。每一行代表一个电台。每个电台的纬度/经度还没有添加，但我猜这个问题对于这个问题来说可以忽略不计。

{ 
    "Rows":[ 
     { 
     "StationId":1, 
     "Text":"MCU SE (SE 1/1) DAE", 
     "IsDialInStation":false, 
     "ConnectState":{ 
      "StationId":1, 
      "DpId":14, 
      "Name":null, 
      "Value":1, 
      "TimeStamp":"\/Date(1400149092000)\/" 
     }, 
     "ConnectStateText":"Nicht verbunden. Hier klicken für Anwahl!", 
     "HasActualData":{ 
      "StationId":1, 
      "DpId":10, 
      "Name":null, 
      "Value":1, 
      "TimeStamp":"\/Date(1404890137000)\/" 
     }, 
     "Anlage":{ 
      "StationId":1, 
      "DpId":20101, 
      "Name":"Anlage", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "cmdSchalteAnlage":{ 
      "StationId":1, 
      "DpId":20013, 
      "Name":"cmdAnlage", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Kurzzeit":{ 
      "StationId":1, 
      "DpId":20104, 
      "Name":"Kurzzeit", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "cmdSchalteKurzzeit":{ 
      "StationId":1, 
      "DpId":20012, 
      "Name":"cmdKurzzeit", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Handbetrieb":{ 
      "StationId":1, 
      "DpId":20160, 
      "Name":"Handbetrieb", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Betriebsbereit":{ 
      "StationId":1, 
      "DpId":20121, 
      "Name":"Betriebsbereit", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Heizt":{ 
      "StationId":1, 
      "DpId":20451, 
      "Name":"Heizt", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Sammelstoerung":{ 
      "StationId":1, 
      "DpId":20140, 
      "Name":"Sammelstoerung", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "SammelstoerungTechnisch":{ 
      "StationId":1, 
      "DpId":20129, 
      "Name":"SammelstoerungTechnisch", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "KommunikationsStoerung":{ 
      "StationId":1, 
      "DpId":20138, 
      "Name":"KommunikationsStoerung", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "KommunikationsStoerungKE":{ 
      "StationId":1, 
      "DpId":20137, 
      "Name":"KommunikationsStoerungKE", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "AllowCommands":true, 
     "AllowParameters":true 
     }, 
     { 
     "StationId":2, 
     "Text":"MCU SE (SE 2/1) Turm", 
     "IsDialInStation":false, 
     "ConnectState":{ 
      "StationId":2, 
      "DpId":14, 
      "Name":null, 
      "Value":1, 
      "TimeStamp":"\/Date(1402984603000)\/" 
     }, 
     "ConnectStateText":"Nicht verbunden. Hier klicken für Anwahl!", 
     "HasActualData":{ 
      "StationId":2, 
      "DpId":10, 
      "Name":null, 
      "Value":1, 
      "TimeStamp":"\/Date(1404890136000)\/" 
     }, 
     "Anlage":{ 
      "StationId":2, 
      "DpId":20101, 
      "Name":"Anlage", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "cmdSchalteAnlage":{ 
      "StationId":2, 
      "DpId":20013, 
      "Name":"cmdAnlage", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Kurzzeit":{ 
      "StationId":2, 
      "DpId":20104, 
      "Name":"Kurzzeit", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "cmdSchalteKurzzeit":{ 
      "StationId":2, 
      "DpId":20012, 
      "Name":"cmdKurzzeit", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Handbetrieb":{ 
      "StationId":2, 
      "DpId":20160, 
      "Name":"Handbetrieb", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Betriebsbereit":{ 
      "StationId":2, 
      "DpId":20121, 
      "Name":"Betriebsbereit", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Heizt":{ 
      "StationId":2, 
      "DpId":20451, 
      "Name":"Heizt", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Sammelstoerung":{ 
      "StationId":2, 
      "DpId":20140, 
      "Name":"Sammelstoerung", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "SammelstoerungTechnisch":{ 
      "StationId":2, 
      "DpId":20129, 
      "Name":"SammelstoerungTechnisch", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "KommunikationsStoerung":{ 
      "StationId":2, 
      "DpId":20138, 
      "Name":"KommunikationsStoerung", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "KommunikationsStoerungKE":{ 
      "StationId":2, 
      "DpId":20137, 
      "Name":"KommunikationsStoerungKE", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "AllowCommands":true, 
     "AllowParameters":true 
     }, 
     { 
     "StationId":4, 
     "Text":"Test W 1", 
     "IsDialInStation":false, 
     "ConnectState":{ 
      "StationId":4, 
      "DpId":14, 
      "Name":null, 
      "Value":1, 
      "TimeStamp":"\/Date(1402996083000)\/" 
     }, 
     "ConnectStateText":"Nicht verbunden. Hier klicken für Anwahl!", 
     "HasActualData":{ 
      "StationId":4, 
      "DpId":10, 
      "Name":null, 
      "Value":0, 
      "TimeStamp":"\/Date(1404890134000)\/" 
     }, 
     "Anlage":{ 
      "StationId":4, 
      "DpId":20101, 
      "Name":"Anlage", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "cmdSchalteAnlage":{ 
      "StationId":4, 
      "DpId":20013, 
      "Name":"cmdAnlage", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Kurzzeit":{ 
      "StationId":4, 
      "DpId":20104, 
      "Name":"Kurzzeit", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "cmdSchalteKurzzeit":{ 
      "StationId":4, 
      "DpId":20012, 
      "Name":"cmdKurzzeit", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Handbetrieb":{ 
      "StationId":4, 
      "DpId":20160, 
      "Name":"Handbetrieb", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Betriebsbereit":{ 
      "StationId":4, 
      "DpId":20121, 
      "Name":"Betriebsbereit", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Heizt":{ 
      "StationId":4, 
      "DpId":20451, 
      "Name":"Heizt", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Sammelstoerung":{ 
      "StationId":4, 
      "DpId":20140, 
      "Name":"Sammelstoerung", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "SammelstoerungTechnisch":{ 
      "StationId":4, 
      "DpId":20129, 
      "Name":"SammelstoerungTechnisch", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "KommunikationsStoerung":{ 
      "StationId":4, 
      "DpId":20138, 
      "Name":"KommunikationsStoerung", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "KommunikationsStoerungKE":{ 
      "StationId":4, 
      "DpId":20137, 
      "Name":"KommunikationsStoerungKE", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "AllowCommands":true, 
     "AllowParameters":true 
     }, 
     { 
     "StationId":3, 
     "Text":"Test W 2", 
     "IsDialInStation":false, 
     "ConnectState":{ 
      "StationId":3, 
      "DpId":14, 
      "Name":null, 
      "Value":1, 
      "TimeStamp":"\/Date(1402996031000)\/" 
     }, 
     "ConnectStateText":"Nicht verbunden. Hier klicken für Anwahl!", 
     "HasActualData":{ 
      "StationId":3, 
      "DpId":10, 
      "Name":null, 
      "Value":1, 
      "TimeStamp":"\/Date(1405488343000)\/" 
     }, 
     "Anlage":{ 
      "StationId":3, 
      "DpId":20101, 
      "Name":"Anlage", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "cmdSchalteAnlage":{ 
      "StationId":3, 
      "DpId":20013, 
      "Name":"cmdAnlage", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Kurzzeit":{ 
      "StationId":3, 
      "DpId":20104, 
      "Name":"Kurzzeit", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "cmdSchalteKurzzeit":{ 
      "StationId":3, 
      "DpId":20012, 
      "Name":"cmdKurzzeit", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Handbetrieb":{ 
      "StationId":3, 
      "DpId":20160, 
      "Name":"Handbetrieb", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Betriebsbereit":{ 
      "StationId":3, 
      "DpId":20121, 
      "Name":"Betriebsbereit", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Heizt":{ 
      "StationId":3, 
      "DpId":20451, 
      "Name":"Heizt", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "Sammelstoerung":{ 
      "StationId":3, 
      "DpId":20140, 
      "Name":"Sammelstoerung", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "SammelstoerungTechnisch":{ 
      "StationId":3, 
      "DpId":20129, 
      "Name":"SammelstoerungTechnisch", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "KommunikationsStoerung":{ 
      "StationId":3, 
      "DpId":20138, 
      "Name":"KommunikationsStoerung", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "KommunikationsStoerungKE":{ 
      "StationId":3, 
      "DpId":20137, 
      "Name":"KommunikationsStoerungKE", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/" 
     }, 
     "AllowCommands":true, 
     "AllowParameters":true 
     } 
    ] 
}

来源

2014-07-16 Robert

标记有什么值？这只是状态，你想要改变颜色吗？ –

由于看起来你不能真正使用标记，你需要用js插入/更新标记。您仍然可以使用'subscribe'函数获取视图模型的更新并将其传递到标记上。 –

这将是一个好的开始，但最后还有更多的内容：一个文本显示一个值，一个显示植物名称。 – Robert

我做这个用的OpenLayers，所以这个答案可能不是最大的，但它可能给你一些洞察到你如何利用标记的视图模型和“绑定”到一个地图使得对视图模型的任何改变都反映在地图上。对我来说，关键是编写一个呈现航点的订阅者函数。

这是我的基本视图模型。我称它们为航点，但它们是OpenLayers.Geometry.Point对象，所以我愿意猜测它们与Leaflet标记类似。

G.WaypointsViewModel = function() { 
    // The list of waypoints. 
    this.waypoints = ko.observableArray([]) 
}

我建立了这样的订户;评论来自我的实际代码，所以我想我们都遭受同样的问题！

// We cannot bind the OpenLayers line that links these waypoints to the 
// waypoint list, so we need a manual subscription to update the line. 
this.waypoints.subscribe(function(new_waypoints) { 

}

理想我会写一些聪明的代码，哪些工作已经在视图模型改变，只是做正确的更新，但为了简单起见我的功能所做的第一件事就是摆脱当前所有航点：

this.waypoints.subscribe(function(new_waypoints) { 
    // Don't continue with an empty array. 
    if (new_waypoints.length == 0) return 

    // Get rid of the current drawings. 
    this.removeMarkers() 
    ...

在的OpenLayers，除去标记物是容易的;我只是叫我的变量destroyFeatures代表标记层：

this.marker_layer = new OpenLayers.Layer.Vector("Markers Layer", { 
     style: G.default_line_style 
    }) 

    this.removeMarkers = function() { 
     marker_layer.destroyFeatures() 
    }

然后我重绘的所有标记：

while (waypoint = this.waypoints()[i]) { 
     marker = new OpenLayers.Feature.Vector(
      waypoint, {type: 'waypoint', index: i} 
     ) 
     this.marker_layer.addFeatures(marker) 

     // Next... 
     i++ 
    }

这是现在所有设置，任何用户确实在使应用程序改变航点（例如删除航点，移动航点等）意味着地图由KO用户自动更新。

该视图模型的完整代码（其中有一个公平一些其他的东西怎么回事）是在这里：

http://simonlikesmaps.appspot.com/js/app/view_models/G.WaypointsViewModel.js

使用它的应用程序是在这里：

http://simonlikesmaps.appspot.com/

希望这给你一些灵感，让你做同样的传单。

其实，我一直想了解单张一段时间，所以我就去读书，勾勒了上面的图案为一个视图模型应该与单张工作。警告 - 这是未经测试 - 所以肯定会有一些错误！

MarkersVM = function() { 

    // Create leaflet map 
    this.map = L.map('map').setView([51.505, -0.09], 13); 

    // Add a marker layer 
    this.addMarkerLayer(); 

    // Turn your JSON into an array of station, each with a lat/lon 
    this.markers = ko.observableArray([ 
     { 
      "StationId":1, 
      "DpId":20101, 
      "Name":"Anlage", 
      "Value":1, 
      "TimeStamp":"\/Date(-62135596800000)\/", 
      "lat": "51", 
      "lon": "0" 
     }, 
     { 
      "StationId":1, 
      "DpId":20013, 
      "Name":"cmdAnlage", 
      "Value":0, 
      "TimeStamp":"\/Date(-62135596800000)\/", 
      "lat": "52", 
      "lon": "1" 
     }, 
    ]); 

    // Subscribe to the array, to redraw the map. 
    this.markers.subscribe(function(new_markers) { 
     // Don't bother with an empty array 
     if (new_markers.length == 0) return; 

     // Start be removing all current markers; to do this, remove the marker layer. 
     map.removeLayer(this.markers); 

     // Add a fresh marker layer. 
     this.addMarkerLayer(); 

     // Now add the points. 
     var i = 0, marker; 
     while (station = this.markers()[i]) { 
      var marker = L.marker(station.lat, station.lon) 

      // You can manipulate the marker here, eg add the name, the text, etc 

      this.markers.add(marker); 
     } 
    }, this); 

    this.addMarkerLayer = function() { 
     this.markers = new L.FeatureGroup(); 
     map.addLayer(this.markers); 
    } 
}

借助于此，给JSON所做的任何变化将改变在视图模型经由该订阅功能会破坏地图上的标记然后绘制新的标记阵列，以确保新的信息被自动显示在地图中。

来源

2014-07-23 16:43:43 sifriday

如何使用leaflet.js和leaflet.js地图标记？

回答

相关问题