Mais

Adicionar / remover marcadores


Estou tentando adicionar / remover marcadores em um mapa de folheto. Eu tenho 6 caixas de seleção, o que eu quero é que quando eu marcar qualquer uma delas mostre os pontos no mapa, e quando desmarcar uma delas a única a remover é aquela que eu desmarco.

O que eu tenho,

As caixas de seleção:

.row .col-md-12 .row label.col-md-7 Primeiro verifique input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck1") .row label.col-md- 7 Segunda verificação input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck2") .row label.col-md-7 Terceira verificação input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck3") .row label.col-md-7 Quarta verificação input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck4") .row label.col- md-7 Five check input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck5") .row label.col-md-7 Six check input.col-md-1 (type = " caixa de seleção "ng-model =" locations.somecheck6 ")

O controlador:

$ scope. $ watch ('locations.somecheck1', function (somecheck1) {if ($ scope.locations.somecheck1 === true) {findItem.find (function (err, items) {lastLocationItems = items [0] .items ; items = lastLocationItems.map ((item) => GeoService.toGeoJSON (item, {idKey: '_id', geometryKey: 'lastLocation'})); getEpc (items, ssccIcon);});} else {leafletData.getMap () .então (função (map) {map.removeLayer (objetosLayer);});}}, verdadeiro);

A função que cria a camada:

function getEpc (items, icon) {var objectsLayer = L.geoJson (items, {pointToLayer: function (items, latlng) {var result; if (icon! == undefined) {result = L.marker (latlng, {icon: ícone});} else {resultado = L.marker (latlng);} resultado de retorno;}}); leafletData.getMap (). then (function (map) {objectsLayer.addTo (map);}); }

Na função de observação, é a função de remoção que é ativada quando a caixa de seleção é falsa. Se eu marcar a caixa de seleção 2, a função criará ambas, mas quando eu quiser remover a primeira, remove apenas a segunda seleção. Eu olhei e descobri que toda vez que clico em uma caixa de seleção, é criada uma nova camada com a nova informação.

Como posso criar automaticamente uma camada para cada caixa de seleção na função getEpc?


Salve uma referência para sua (s) camada (s) de objeto e remova-as antes de adicioná-las novamente para evitar duplicatas. Parece que você já estava no caminho certo, mas seu atualobjectsLayertem um escopo dentrogetEpc ()… Você precisa definir isso em um nível superior e precisa manter uma camada separada para cada caixa de seleção.

Observe que o Leaflet já suporta esse conceito pronto para uso usando o controle Layers. Você pode criar sobreposições, adicioná-las ao controle de camadas e usar as caixas de seleção para alternar automaticamente as camadas, o que irá adicioná-las e removê-las para você.

No entanto, se você quiser fazer isso sozinho, precisará fazer algumas coisas:

Primeiro, modifiquegetEPC ()para retornar uma referência à nova camada:

function getEpc (items, icon) {var objectsLayer = L.geoJson (items, {pointToLayer: function (items, latlng) {var result; if (icon! == undefined) {result = L.marker (latlng, {icon: ícone});} else {resultado = L.marker (latlng);} resultado de retorno;}}); leafletData.getMap (). then (function (map) {objectsLayer.addTo (map);}); // retorna a referência da camada para que possamos gerenciá-la return objectsLayer; }

Em seguida, você precisa gerenciar as camadas à medida que as adiciona e remove.

Nota: será muito tedioso fazer isso para cada caixa de seleção ... você pode querer usar umwatchGroupouwatchCollectionem vez de. Mas para manter o exemplo simples, tentei usar seu código sem fazer grandes modificações:

// cache global para sobreposições. // você pode querer colocar isso em algum lugar melhor, mas mantendo o exemplo simples ... var overlays = {}; $ scope. $ watch ('locations.somecheck1', function (somecheck1) {if ($ scope.locations.somecheck1 === true) {findItem.find (function (err, items) {lastLocationItems = items [0] .items ; items = lastLocationItems.map ((item) => GeoService.toGeoJSON (item, {idKey: '_id', geometryKey: 'lastLocation'})); var objectsLayer = getEpc (items, ssccIcon); // obter nova camada / / salvar referência de camada para que possa ser removida sobreposições posteriores ["somecheck1"] = objectsLayer;});} else if (overlays ["somecheck1"]) {leafletData.getMap (). then (function (map) {map.removeLayer (overlays ["somecheck1"]); // remover camada em cache});}}, true); $ scope. $ watch ('locations.somecheck2', function (somecheck1) {if ($ scope.locations.somecheck2 === true) {findItem.find (function (err, items) {lastLocationItems = items [0] .items ; items = lastLocationItems.map ((item) => GeoService.toGeoJSON (item, {idKey: '_id', geometryKey: 'lastLocation'})); var objectsLayer = getEpc (items, ssccIcon); // obter nova camada / / salvar referência de camada para que possa ser removida sobreposições posteriores ["somecheck2"] = objectsLayer;});} else if (overlays ["somecheck2"]) {leafletData.getMap (). then (function (map) {map.removeLayer (sobreposições ["somecheck2"]);});}}, verdadeiro);

// etc, para cada caixa de seleção (mas prefira refatorar em métodos menores e reutilizáveis)


Assista o vídeo: Minecraft przeglądy modów Minecraft u0026 - Reis Mini Map Mod HD (Outubro 2021).