knockout.js를 leaflet.js지도 표시 자와 함께 사용하는 방법은 무엇입니까?

우리는 다른 위치에 위치 된 산업용 식물을위한 웹 시각화를 구축하고있다. 현재 개요 페이지에는 표 레이아웃이 사용됩니다. 각 행은 하나의 식물과 그 가장 중요한 상태와 가치를 나타냅니다.knockout.js를 leaflet.js지도 표시 자와 함께 사용하는 방법은 무엇입니까?

지금 양자 택일 마커지도를 표시하는 요구 사항이있다. 각 마커의 색상은 현재 상태를 나타냅니다 (녹색 = ok, 빨간색 = 오류, 노란색 = 경고 등). 현재 테이블 기반 페이지에서

우리는 (그 안에 및 해당 사업부의의 등) 테이블 행에 뷰 모델에서 각각의 식물의 특성을 결합하는 knockout.js를 사용합니다. 뷰 모델의 값은 상태 또는 값이 변경 될 때마다 signalr을 통해 업데이트되므로이 값을 플랜트 상태에 대한 실시간 이벤트 기반 표현으로 간주 할 수 있습니다.

이 뷰 모델에는 맵에 표시해야하는 모든 정보가 이미 포함되어 있으므로 리필 표시자를 뷰 모델에 바인딩하고 싶습니다. 그러나이를 수행하는 방법을 알 수 없습니다. 문제는 data-bind 속성과 함께 사용할 수있는 표시에 대한 요소가 없다는 것입니다.

정확히 말하면 각 플랜트에 (정적 인) 마커를 추가 할 수는 있지만, 뷰 모델에 변경 값을 동적으로 나타내려면 뷰 모델에 데이터 바인딩 할 수 없습니다. 그것을 할 수있는 방법이 있습니까?

정말 완벽하게 우리의 요구에 맞는로 전단지와에 가고 싶습니다. 웹 응용 프로그램은 영구적으로 인터넷에 연결되어 있지 않은 특수 그물에서 실행해야하므로 우리는 우리 자신의 타일을 제공해야합니다 (전단 및 Maperetive에서 효과적입니다). 우리의 필요에 맞는 전단지 이외의 해결책이 있다면 알려 주시기 바랍니다. 감사!

업데이트 : 여기 내 뷰 모델의 실제 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' 함수를 사용하여 viewmodel의 업데이트를 가져 와서 마커에 전달할 수 있습니다. –

그게 좋은 출발점 이겠지만, 결국에는 가치가있는 텍스트와 식물 이름을 보여주는 텍스트가 더 많습니다. – Robert

나는 OpenLayers와 함께이 일을, 그래서이 답변이 가장 큰되지 않을 수도 있습니다,하지만 당신이지도에 마커의 뷰 - 모델과 '바인딩'이 걸릴 수있는 방법에 대한 통찰력을 줄 수도 뷰 모델에 대한 모든 변경 사항이 맵에 반영됩니다. 나를위한 열쇠는 경유지를 렌더링하는 구독자 함수를 작성하는 것이 었습니다.

은 여기 내 기본 뷰 - 모델이다. 웨이 포인트라고 부르지 만 OpenLayers.Geometry.Point 오브젝트이므로 리플렛 마커와 비슷하다고 생각합니다.

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에서 마커를 제거하는 것은 쉽습니다. 이제이 모든 설정

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

     // Next... 
     i++ 
    }

, 사용자가 원인이되는 응용 프로그램에서와 아무것도 :

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

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

그런 다음 나는 모든 마커를 다시 그리기 : 난 그냥 마커 층을 나타내는 내 변수에 destroyFeatures 전화 중간 지점 변경 (예 : 중간 지점 삭제, 이동 등)은지도가 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

knockout.js를 leaflet.js지도 표시 자와 함께 사용하는 방법은 무엇입니까?

답변

관련 문제